如何在jqgrid中创建两个页脚行

Question

我正在使用ASP.NET WEB API处理jqgrid。

我想在jqgrid的页脚中添加两行。

所以在网上进行一点搜索就把我带到了这个链接（2010），上面写着“这是不可能的”，我想的是，答案是在2010年，现在可能已经有了一些事情/一些可能的解决方法可能的。

我想在页脚中显示什么？

我想要显示两行

• 当前页面中预设的数据总计
• 所有页面中的数据总计

我能够传递数据并读取数据，问题是如何使用这些数据并在jqgrid中创建两个页脚行。

有什么想法吗？

Answer 1

我发现这个问题很有趣，所以我创建了the demo，它演示了两行页脚的可能实现方式：

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

.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列中设置了其他信息。