如何在jqgrid中格式化total的摘要行

时间：2015-12-22 16:24:00

标签： jquery jqgrid

我已经添加了我需要的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这样的标签，然后使用颜色Hihlight这个摘要部分？

这是指向demo

的链接

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

问候

2 个答案:

答案 0 :(得分：2)

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

summaryType: function () {
    return "Total:";
}
<{1>}列中的

。结果将在修改过的演示版上：https://jsfiddle.net/OlegKi/zqLp4yrg/20/

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

这样的CSS设置 
ProductName

请参阅https://jsfiddle.net/OlegKi/zqLp4yrg/24/。

.jqfoot { background-color: DarkKhaki; background-image: none; } 中存在summaryTpl属性，其默认值colModel可用于格式化摘要单元格。因此可以指定

{0}

并使用

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

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

答案 1 :(得分：1)

您可以使用以下public static String getSeparatorText(MenuItem menu) { float maxWidth = getMaxWidthInSubMenu(menu); return getSeparatorText(menu, maxWidth ); } private static float getMaxWidthInSubMenu(MenuItem menu) { Paint p = new Paint(); float maxLength = 0; for (int i = 0; i < menu.getSubMenu().size(); i++) { String text = menu.getSubMenu().getItem(i).getTitle().toString(); maxLength = Math.max(maxLength, p.measureText(text)); } return maxLength; } private static String getSeparatorText(MenuItem menu, float maxWidth) { Paint p = new Paint(); // this is not a dash, but the box ascii character! // Combinations will look like a line: ────────────────────────────── String boxLine = "─"; String sep = boxLine; while (p.measureText(sep) < maxWidth) sep += boxLine; return sep; } 设置组摘要行的背景颜色。

css

您可以在任何列中设置.ui-widget-content.jqfoot { background-color: red; background-image: none; } 标签，如下所示。

Toatal

UPDATED FIDDLE

相关问题
最新问题