Question

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

如何计算页脚行中的总和，因为它始终为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等。为了在页脚中显示摘要，您需要在格式化程序中查找这些fielld并且如果它们不存在则使用colModel中的定义。

第二个注释是使用网格完成和循环

<Text>{AuthStore.state.username} {RouterStore.state.pathname}</Text>

在这个循环中，你在evey单元格中使用getColl进行求和，这会导致在大量表格数据的情况下使用令人不快的代码减速。

总和只能进行一次。

最后但并非最不重要的一点是，您不应在colModel中使用名为空值的名称。

下面是一个只有一个格式化程序的工作代码。您需要更改另一个格式：

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

这是jsfiddle demo

享受

在jqgrid中添加另外两列的结果列？

1 个答案: