jqgrid分组中的附加信息

Question

在下面demo, I need meta-info about each grouped data on top.So, let's say if I want sum then sum of each row of individual column (only summable quantity) must appear on top of the grouped column.grouped sum for tax of one column.

完整代码如下

$(function () {
    "use strict";
    $("#grid1").jqGrid({
        colModel: [
            { name: "name", label: "Client", width: 53 },
            { name: "invdate", label: "Date", width: 75, align: "center", sorttype: "date",
             formatter: "date", formatoptions: { newformat: "d-M-Y" } },
            { name: "tax", label: "Tax", width: 41, template: "number" },
            { name: "closed", label: "Closed", width: 59, template: "booleanCheckboxFa", firstsortorder: "desc" },
            { name: "ship_via", label: "Shipped via", width: 87, align: "center", formatter: "select",
             formatoptions: { value: "FE:FedEx;TN:TNT;DH:DHL", defaultValue: "DH" } }
        ],
        data: [
            { id: "10",  invdate: "2015-10-01", name: "test",   amount: "" },
            { id: "20",  invdate: "2015-09-01", name: "test1",  tax: "29.00", closed: false, ship_via: "FE" },
            { id: "30",  invdate: "2015-09-01", name: "test1",  tax: "32.00", closed: false, ship_via: "FE" },
            { id: "40",  invdate: "2015-10-04", name: "test4",  tax: "10.00", closed: true,  ship_via: "TN" },
            { id: "50",  invdate: "2015-10-31", name: "test1",  tax: "20.00", closed: false, ship_via: "FE" },
            { id: "60",  invdate: "2015-09-06", name: "test4",  tax: "30.00", closed: false, ship_via: "FE" },
            { id: "70",  invdate: "2015-10-04", name: "test4",  tax: "10.00", closed: true,  ship_via: "TN" },
            { id: "80",  invdate: "2015-10-03", name: "test8",  tax: "20.00", closed: false, ship_via: "FE" },
            { id: "90",  invdate: "2015-09-01", name: "test3",  tax: "30.00", closed: false, ship_via: "TN" },
            { id: "100", invdate: "2015-09-08", name: "test1", tax: "30.00", closed: true,  ship_via: "TN" },
            { id: "110", invdate: "2015-09-08", name: "test11", tax: "30.00", closed: false, ship_via: "FE" },
            { id: "120", invdate: "2015-09-10", name: "test12", tax: "30.00", closed: false, ship_via: "FE" }
        ],
        iconSet: "fontAwesome",
        rownumbers: true,
        pager: true,
        rowNum: 10,
        sortname: "invdate",
        sortorder: "desc",
        caption: "The grid, which uses predefined formatters and templates"
    });
    $("#grid1").jqGrid('groupingGroupBy','name');
});

Answer 1

最简单的实现需求的方法是使用 groupSummaryPos: ["header"] 属性 of groupingView 并定义 summaryType: "sum" 和可选的 summaryTpl列，您要在其中显示摘要信息（在您的情况下为 amount 列）

查看修改后的演示 https://jsfiddle.net/OlegKi/stn2yfxn/9/ 显示如下结果

jqgrid分组中的附加信息

Additional information in jqgrid grouping

jquery

jqgrid