如何在jqgrid中格式化总计的汇总行答案

【问题标题】：How to format the summary row for total in jqgrid如何在jqgrid中格式化总计的汇总行
【发布时间】：2015-12-22 16:24:00
【问题描述】：

我在 jQuery 列中添加了 summaryType 属性，我需要自动计算总和，如下所示

    var localdata = [
{ "CatId" :"3", "InventoryDate":"24/11/2015 15:08:00", "CategoryName":"MECHES", "ProductCode":"50F207229#434299004", "ProductName":"MECHE LENTE", "TotalQuantity":" 8", "TotalWeight":"0,0000", "UnitMeasureCode":"Pcs", "UsedQuantity":"4", "UsedWeight ":"0,0000", "Weight":"0,00", "RemainingQuantity":"0", "RemainingWeight":"0,0000" }, { "CatId":"1", "InventoryDate":"24/11/2015 12:12:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170400596", "ProductName": "EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"25,00", "RemainingQuantity":"16", "RemainingWeight":"25,0000" }, { "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170500598", "ProductName":"EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"25,00", "RemainingQuantity":"16", "RemainingWeight":"25,0000" }, { "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170500599", "ProductName":"EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg ", "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"25,00", "RemainingQuantity":"16", "RemainingWeight":"25,0000" }, { "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170500600", "ProductName":"EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"5", "UsedWeight":"7,8125", "Weight":"25,00", "RemainingQuantity":"6", "RemainingWeight":"17,1875" }, { "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170600601", "ProductName:":"EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"0", "UsedWeight":"0,0000","Weight":"25,00", "RemainingQuantity":"16", "RemainingWeight":"25,0000" }, { "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170600602", "ProductName":"EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"25,00", "RemainingQuantity":"16", "RemainingWeight":"25,0000"}, { "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170700603", "ProductName":"EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"25,00", "RemainingQuantity":" 16", "RemainingWeight":"25,0000" }, { "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170700604", "ProductName":"EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"0", "UsedWeight":"0,0000","Weight":"25,00", "RemainingQuantity":"16", "RemainingWeight":"25,0000" }, { "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170700605", "ProductName":"EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"25,00", "RemainingQuantity":" 16", "RemainingWeight":"25,0000" }, { "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170800606", "ProductName":"EURONIX", "TotalQuantity ":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"25,00", "RemainingQuantity":"16", "RemainingWeight":"25,0000" }, { "CatId":"2", "InventoryDate":"24/11/2015 13:18:00", "CategoryName":"DETONATEURS", "ProductCode":"12640#143290051681", "ProductName":"PYRO ERIKA", "TotalQuantity":"100", "TotalWeight":"0,0000", "UnitMeasureCode":"Pcs", "UsedQuantity":"90", "UsedWeight":"0,0000", "Weight":"0,00", "RemainingQuantity":"80", "RemainingWeight":"0,0000 "}, { "CatId":"3", "InventoryDate":"24/11/2015 15:12:00", "CategoryName":"MECHES", "ProductCode":"50F207229#434299005", "ProductName":"MECHE LENTE", "TotalQuantity":" 8", "TotalWeight":"0,0000", "UnitMeasureCode":"Pcs", "UsedQuantity":"3", "UsedWeight":"0,0000", "Weight":"0,00", "RemainingQuantity":"2", "RemainingWeight":" 0,0000" }, { "CatId":"3", "InventoryDate":"24/11/2015 15:14:00", "CategoryName:":"MECHES", "ProductCode":"50F207229#434299006", "ProductName":"MECHE LENTE", "TotalQuantity":" 8", "TotalWeight":"0,0000", "UnitMeasureCode":"Pcs", "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"0,00", "RemainingQuantity":"8", "RemainingWeight":" 0,0000"}, { "CatId":"3", "InventoryDate":"24/11/2015 15:15:00", "CategoryName":"MECHES", "ProductCode":"50F207229#434299007", "ProductName":"MECHE LENTE", "TotalQuantity":" 8", "TotalWeight":"0,0000", "UnitMeasureCode":"Pcs", "UsedQuantity":"2", "UsedWeight":"0,0000", "Weight":"0,00", "RemainingQuantity":"4", "RemainingWeight":" 0,0000" }, { "CatId":"2", "InventoryDate":"27/11/2015 19:40:00", "CategoryName":"DETONATEURS", "ProductCode":"UN0360#H34122", "ProductName":"LIGNE DE TIR NONEL", "TotalQuantity":" 120", "TotalWeight":"0,0000", "UnitMeasureCode":"Pcs", "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"0,00", "RemainingQuantity":"120", "RemainingWeight":"0,0000" } ];

$("#jqGrid").jqGrid({
    data: localdata,
    colModel: [
        { label: 'CatId', name: 'CatId', key: true, width: 30 },
        { label: 'InventoryDate', name: 'InventoryDate', width: 70 },
        { label: 'ProductName', name: 'ProductName', width: 150 },
        { label: 'RemainingQuantity', name: 'RemainingQuantity', width: 150 },
        { name: 'TotalQuantity', index: 'TotalQuantity', width: 60, sortable: true, align: "center", search: false, sorttype: 'number', formatter: 'number', summaryType: 'sum' },
                { name: 'TotalWeight', index: 'TotalWeight', width: 80, sortable: true, align: "right", search: false, sorttype: 'number', formatter: 'number', summaryType: 'sum' },
                { name: 'UnitMeasureCode', index: 'UnitMeasureCode', width: 60, sortable: true, align: "right", search: false, formatter: 'string' },
                { name: 'UsedWeight', index: 'UsedWeight', width: 60, sortable: true, align: "right", search: false, sorttype: 'number', formatter: 'number', summaryType: 'sum' },
                { name: 'UsedQuantity', index: 'UsedQuantity', width: 60, sortable: true, align: "center", search: false, sorttype: 'number', formatter: 'number', summaryType: 'sum' }


    ],
    iconSet: "fontAwesome",
    viewrecords: true,
    rowList: [20,30,50],
    width: 780,
    height: 250,
    rowNum: 20,
    sortname: "ProductName",
    grouping: true,
    groupingView: {
        groupField: ["CatId"],
        groupColumnShow: [true],
        groupText: [
            "CatId: <b>{0}</b>"
        ],
        groupOrder: ["asc"],
        groupSummary: [true],
        groupSummaryPos: ["header"],
        groupCollapse: false
    }
});

我遇到的问题是每个组下方的摘要行无法很好地看到和识别。

如何在前面添加一个像 Total 这样的标签，然后用颜色突出显示该摘要部分？

这里是demo的链接

您可以看到，在每个组的末尾，最后一行显示相应列的页脚 SUM。我想设置这些 SUM 单元格的背景并将标签 Totals 放在前面。

问候

【问题讨论】：

如果您添加 jsfiddle 演示来演示您的当前状态并在其中包含您想要显示“Total”文本的位置的图片，将会很有帮助。您使用 groupSummaryPos: ["header"] 和 `groupText: ["CatId: {0}"]` 并在 TotalQuantity 列和更高版本中设置汇总值。例如，可以将文本“Total”放在三列之一中：InventoryDate、ProductName 或 RemainingQuantity。
我已将扭结添加到演示中

标签： jquery jqgrid

【解决方案1】：

如果我正确理解您的要求，您可以定义

summaryType: function () {
    return "Total:";
}

在ProductName 列中。结果将在修改后的演示中：https://jsfiddle.net/OlegKi/zqLp4yrg/20/

更新：要更改摘要行的背景颜色，有多种方法。例如，可以在整个分组页脚行中进行更改。可以使用 CSS 设置，如

.jqfoot {
     background-color: DarkKhaki;
     background-image: none;
}

见https://jsfiddle.net/OlegKi/zqLp4yrg/24/。

colModel 中存在summaryTpl 属性，默认值为{0}，可用于格式化汇总单元格。因此可以指定

summaryTpl: "<div class='mysum'>{0}</div>"

使用

.mysum {
    background-color: DarkKhaki;
    background-image: none;
    width: 100%;
    height: 100%;
}

喜欢https://jsfiddle.net/OlegKi/zqLp4yrg/25/。应该添加更多 CSS 规则以改善摘要行的外观，但所有这些都将是纯 CSS 设置。

【讨论】：

这是标签 Total 的 ik，但是我如何设置 sum 结果的单元格背景颜色？
@serge：如果一个问题在一个问题中发布多个问题，这就是问题所在。请参阅我的回答的已更新部分。
这正是我想要的。你是国王:-)
@serge：顺便说一下，我看到你是 stackoverflow 的成员，从 4 年 3 个月开始，但你只使用了 3 次投票或回答。对 stackoverflow 的主要功能进行投票，因为 stackoverflow 的成员决定某些信息是否有用。投票将被搜索引擎端使用，即使Goodle在设置显示结果的顺序时使用它。您有权在一天内投票大约 30 个答案（请参阅the post）。
@serge：如果你想帮助其他人你应该投票给每个问题或答案，其中至少包含一些有用的信息。您不仅应该对您的问题的答案执行此操作，还应该对您在 stachoverflow 上找到的所有答案问题执行此操作。这真的很重要。有关投票的更多信息，请参阅here。

【解决方案2】：

您可以使用以下css设置组摘要行的背景颜色。

.ui-widget-content.jqfoot {
    background-color: red;
    background-image: none;
}

您可以在任何列中设置Toatal 标签，如下所示。

 summaryType: function () {
     return "Total:";
}

UPDATED FIDDLE

【讨论】：