添加一列是 jqgrid 中其他两列的结果？

Question

我有 jqgrid，我想在页脚中显示列的总和。这里的列也是其他列的总和，在页脚中我必须在那里显示总和。

如何计算页脚行中的总和，因为它始终为 0.0？

这是我的 jqgrid 代码。

        $("#jqGridQuarterly").jqGrid({
        datatype: "json",
        url: "/CapacityPlanning/getQuaterlySummary?resourceId=" + resourceId + "&fiscalYear=" + fiscalYear,
        contentType: "application/json; charset-utf-8",
        mtype: 'POST',
        height: 'auto',
        width: 902,
        colNames: ['Name', 'Project', 'Allocation', 'Q1', 'Q2', 'Q3', 'Q4'],
        colModel: [{ name: 'MAN_EMAIL' },
            { name: 'PRD_NAME' },
            { name: '' },
            { name: 'Q1', formatter: sumFmatterQ1, editable: "readonly", align: "center", unformat: unformatterQ1 },
            { name: 'Q2', formatter: sumFmatterQ2, editable: "readonly", align: "center" },
        { name: 'Q3', formatter: sumFmatterQ3, editable: "readonly", align: "center" },
        { name: 'Q4', formatter: sumFmatterQ4, editable: "readonly", align: "center" }
        ],
        //sortname: ["REQ_ID"],
        shrinkToFit: false,
        autowidth: true,
        forceFit: true,
        gridView: true,
        grouping: true,
        footerrow: true,
        userDataOnFooter: true,
        groupingView: {
            groupField: ["MAN_EMAIL"],
            groupColumnShow: [false],
            groupText: [
                "Resource Name: <b>{0}</b>"
            ],
            groupOrder: ["asc"],
            //groupSummary: [true],
            //groupSummaryPos: ["header"],
            groupCollapse: false
        },
        gridComplete: function () {
            var grid = $("#jqGridQuarterly")

            $('#jqGridQuarterly td').each(function () {
                var thisText = $(this).text();
                if ($(this).text() == 'TOTAL') {
                    $(this).parent().css('font-weight', 'bold')
                    $(this).parent().css('background', '#E0E0E0');

                }
                if (parseInt($(this).text()) > 20) {
                    $(this).css('background-color', 'red');
                }

                sumJan = grid.jqGrid("getCol", "Q1", false, "sum");
                sumFeb = grid.jqGrid("getCol", "Q2", false, "sum");
                sumMar = grid.jqGrid("getCol", "Q3", false, "sum");
                sumApr = grid.jqGrid("getCol", "Q4", false, "sum");

                grid.jqGrid('footerData', 'set', {
                    PRD_NAME: 'Total Allocation:',
                    Q1: sumJan,
                    Q2: sumFeb,
                    Q3: sumMar,
                    Q4: sumApr
                });
            });
        },

        rowNum: 1000

    });

我正在使用自定义格式化程序，我看到很多帖子也建议使用 unformatter，这里也有相应的代码。

    function sumFmatterQ1(cellvalue, options, rowObject) {
        options;
        var jan = parseFloat(rowObject.EST_JAN || 0);
        var feb = parseFloat(rowObject.EST_FEB || 0);
        var mar = parseFloat(rowObject.EST_MAR || 0);
        debugger;
        return (jan + feb + mar).toFixed(1);

    }
    function unformatterQ1(cellvalue, options) {
        return cellvalue;
    }

我正在使用 jqGrid 4.6.0 版。我看到了类似的问题，但没有得到任何答案 adding a jqgrid column that is a result of two other columns

Answer 1

首先，您需要禁用 userDataOnFooter，即将其设置为 false。 userData OnFooter 意味着求和是在服务器上执行的，并且此数据与您的源数据一起传输并直接放置到网格中，而无需您进行任何操作。

其次，在您的 gridComplete 事件中，您遍历所有网格单元以使用 getCol 对行求和，这会执行相同的操作 - 这将导致很多性能问题并且作为概念是糟糕的。

此外，您可以使用 colModel 中的 summaryType 和 summaryTpl 来执行相同的操作并丢弃 gridComplete 中的代码。 See this example

我建议你看看 old docs here

更新

抱歉，我没有看到一些附加条件。

在您的情况下，主要问题在于格式化程序以及您使用 footerData 设置汇总值的方式。

如您所知，footerData 使用 colModel 在页脚中设置值，但您的 colModel 不包含 EST_JAN 等。为了在页脚中显示摘要，您需要检查格式化程序中的这些字段，如果它们不存在，则使用 colModel 中的定义。

第二个注意事项是grid的使用complete和循环

$('#jqGridQuarterly td').each(function () {...

在这个循环中，您在每个单元格上使用 getColl 进行求和，这会在大量 table 数据的情况下导致代码难以置信的减速。

总和应该只执行一次。

最后但同样重要的是，您不应在 colModel 中使用空值的名称。

下面是一个工作代码，只有一个 formatter.You 需要更改另一个 accordance:

function sumFmatterQ1(cellvalue, options, rowObject) {
    if(rowObject.EST_JAN && rowObject.EST_FEB && rowObject.EST_MAR) {
        var jan = parseFloat(rowObject.EST_JAN || 0);
        var feb = parseFloat(rowObject.EST_FEB || 0);
        var mar = parseFloat(rowObject.EST_MAR || 0);
        return (jan + feb + mar).toFixed(1);
    } else {
        return cellvalue;
  }
}
    function unformatterQ1(cellvalue, options) {
        return cellvalue;
    }
    var mydata =[
        {MAN_EMAIL:"my@email.com", EST_JAN: 10, EST_FEB: 1, EST_MAR : 3},
        {MAN_EMAIL:"my@email.com", EST_JAN: 10, EST_FEB: 1, EST_MAR : 3},
        {MAN_EMAIL:"my@email.com", EST_JAN: 10, EST_FEB: 1, EST_MAR : 3},
        {MAN_EMAIL:"my@email.com", EST_JAN: 10, EST_FEB: 1, EST_MAR : 3},
        {MAN_EMAIL:"my2@email.com", EST_JAN: 12, EST_FEB: 12, EST_MAR : 13},
        {MAN_EMAIL:"my2@email.com", EST_JAN: 13, EST_FEB: 11, EST_MAR : 23},
        {MAN_EMAIL:"my2@email.com", EST_JAN: 14, EST_FEB: 11, EST_MAR : 33},
    ];
$("#jqGridQuarterly").jqGrid({
        datatype: "local",
        data : mydata,
        url: "/CapacityPlanning/getQuaterlySummary?resourceId=",
        contentType: "application/json; charset-utf-8",
        mtype: 'POST',
        height: 'auto',
        width: 902,
        colNames: ['Name', 'Project', 'Allocation', 'Q1', 'Q2', 'Q3', 'Q4'],
        colModel: [{ name: 'MAN_EMAIL' },
            { name: 'PRD_NAME' },
            { name: '111' },
            { name: 'Q1', formatter: sumFmatterQ1, editable: false, align: "center", unformat: unformatterQ1 },
            { name: 'Q2', editable: "readonly", align: "center" },
        { name: 'Q3',  editable: "readonly", align: "center" },
        { name: 'Q4',  editable: "readonly", align: "center" }
        ],
        //sortname: ["REQ_ID"],
        shrinkToFit: false,
        autowidth: true,
        forceFit: true,
        gridView: true,
        grouping: true,
        footerrow: true,
        userDataOnFooter: true,
        groupingView: {
            groupField: ["MAN_EMAIL"],
            groupColumnShow: [false],
            groupText: [
                "Resource Name: <b>{0}</b>"
            ],
            groupOrder: ["asc"],
            //groupSummary: [true],
            //groupSummaryPos: ["header"],
            groupCollapse: false
        },
        gridComplete: function () {
            var grid = $("#jqGridQuarterly")

            $('#jqGridQuarterly td').each(function () {
                var thisText = $(this).text();
                if ($(this).text() == 'TOTAL') {
                    $(this).parent().css('font-weight', 'bold')
                    $(this).parent().css('background', '#E0E0E0');

                }
                if (parseInt($(this).text()) > 20) {
                    $(this).css('background-color', 'red');
                }
            });

                sumJan = grid.jqGrid("getCol", "Q1", false, "sum");
                //sumFeb = grid.jqGrid("getCol", "Q2", false, "sum");
                //sumMar = grid.jqGrid("getCol", "Q3", false, "sum");
                //sumApr = grid.jqGrid("getCol", "Q4", false, "sum");
                $(this).jqGrid('footerData', 'set', {
                    PRD_NAME: 'Total Allocation:',
                    Q1: sumJan,
                    //Q2: sumFeb,
                    //Q3: sumMar,
                    //Q4: sumApr
    });
    },
    rowNum: 1000
});

这是一个jsfiddle demo

享受

添加一列是 jqgrid 中其他两列的结果？

Adding a column that is a result of two other columns in jqgrid?

jquery

jqgrid