关于asp.net mvc：如何在jqgrid中创建两个页脚行


How to create two footer rows in jqgrid

我正在使用 ASP.NET WEB API 开发 jqgrid。

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

所以在网上进行了一些搜索，将我带到了这个链接(2010)，上面写着"不可能"，我认为答案是 2010 年，现在可能是一些事情/可能已经做出了一些解决方法可能的。

我想在页脚中显示什么？

我想显示两行

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

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

有什么想法吗？

相关讨论

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

enter

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

的定义相同

1
2
3
4
5
6
7
8
9
10
.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;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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 列中设置了附加信息。

相关讨论