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

Question

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

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

因此，我在网上搜索后找到了这个链接（2010年），其中说“不可能”，但考虑到答案是2010年的，也许现在已经有一些方法/解决方案可以实现这一点。

我想在页脚中显示两行内容：

1. 当前页面数据的总数 2. 所有页面数据的总和

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

你有什么想法吗？

- Yasser Shaikh

---

请查看此链接：https://dev59.com/z1vUa4cB1Zd3GeqPrDKG - Behnam Esmaili

Answer 1

我发现这个问题很有趣，因此我创建了演示，演示了其中一种可能的双行页脚实现：

主要思路是在标准页脚已存在的表格中添加第二行。为了消除与 jqGrid 代码的其他部分可能出现的问题，我将自定义行中的 footrow 类名替换为 myfootrow。为了让第二个页脚具有与原始页脚相同的 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和amount列中。

- Oleg

---

很好的回答，@Oleg，但有点晚了..我已经创建了一个（不太干净的）解决方法。我只创建了一个页脚，每个单元格都有两个被<span>标签包围的值，然后使用一些CSS来实现两个页脚行的视觉效果。我接受这个答案，并会看看是否有时间将我的代码改成这样。这个答案必须来自你，Oleg，我已经阅读了你发布的所有jqgrid答案。我也要感谢你提供的所有那些答案。 - Yasser Shaikh

永远不晚成为有用之人，我刚刚将其作为在free-jqgrid中实现页脚的基础。谢谢！ - AFract