asp.net-mvc – 如何在jqgrid中创建两个页脚行

主要思想是在表格中添加标准页脚已存在的第二行.为了消除jqGrid代码的其他部分可能出现的问题,我将自定义行中的footrow类名替换为myfootrow.要为第二个页脚提供与原始tooter相同的CSS设置,我从ui.jqgrid.css中包含了.ui-jqgrid tr.footrow td的副本,其中包含与.ui-jqgrid tr.myfootrow td相同的定义：

.ui-jqgrid tr.myfootrow td {
    font-weight: bold;
    overflow: hidden;
    white-space:nowrap;
    height: 21px;
    padding: 0 2px 0 2px;
    border-top-width: 1px;
    border-top-color: inherit;
    border-top-style: solid;
}

您将在下面找到完整的代码

footerrow: true,loadComplete: function () {
    var $this = $(this),sum = $this.jqGrid("getCol","amount",false,"sum"),$footerRow = $(this.grid.sDiv).find("tr.footrow"),localData = $this.jqGrid("getGridParam","data"),totalRows = localData.length,totalSum = 0,$newFooterRow,i;

    $newFooterRow = $(this.grid.sDiv).find("tr.myfootrow");
    if ($newFooterRow.length === 0) {
        // add second row of the footer if it's not exist
        $newFooterRow = $footerRow.clone();
        $newFooterRow.removeClass("footrow")
            .addClass("myfootrow ui-widget-content");
        $newFooterRow.children("td").each(function () {
            this.style.width = ""; // remove width from inline CSS
        });
        $newFooterRow.insertAfter($footerRow);
    }
    $this.jqGrid("footerData","set",{invdate: "Total (page):",amount: sum});

    // calculate the value for the second footer row
    for (i = 0; i < totalRows; i++) {
        totalSum += parseInt(localData[i].amount,10);
    }
    $newFooterRow.find(">td[aria-describedby=" + this.id + "_invdate]")
        .text("Grand Total:");
    $newFooterRow.find(">td[aria-describedby=" + this.id + "_amount]")
        .text($.fmatter.util.NumberFormat(totalSum,$.jgrid.formatter.number));
}

在代码中,我在列invdate和页脚数量中设置了附加信息.