如何创建的jqGrid 2尾行 [英] How to create two footer rows in jqgrid

问题描述

我的工作用的jqGrid的ASP.NET Web API。

I am working on jqgrid with ASP.NET WEB API.

我想在jqGrid的的页脚添加两行。

I want to add two rows in the footer of jqgrid.

因此​​，在网络上一点点搜索把我带到这个链接（2010年），它说：这是不可能的，我想到的答案是2010年，可能是现在/可能已经做了一些事一些解决方法可能这一点。

So a little search on the net brought me to this link (2010) which says "It is not possible", I am thinking as the answer is of 2010, may be by now some thing / some workaround may have been made possible for this.

我想要什么页脚中显示？

我要显示两行

• 总在当前页面的数据preSET


• 总计数据present在所有的页面

我可以传递数据和读取数据，问题是如何使用这些数据，并在jqGrid的创建两个尾行。

I am able to pass the data and read the data, the question is how to use this data and create two footer rows in jqgrid.

有什么想法？

推荐答案

我发现这个问题有意思，所以我创建的这表明从可能实现两行页脚一个演示：

I found the question interesting, so I created the demo which demonstrates one from the possible implementation of two-rows footer:

的主要思想是增加第二行中，其中的标准页脚已经存在的表。为了消除我换成 footrow 类名称自定义行​​中的 myfootrow 的jqGrid code的其他部位可能出现的问题。有相同的CSS设置第二页脚原tooter已列入我的.ui-的jqGrid tr.footrow TD 从 UI的副本。 jqgrid.css 与的.ui-的jqGrid tr.myfootrow TD 相同的定义：

The main idea is to add the second row in the table where the standard footer already exist. To eliminate possible problems with other parts of jqGrid code I replaced footrow class name in the custom row to myfootrow. To have the same CSS settings for the second footer as the original tooter has I included the copy of .ui-jqgrid tr.footrow td from ui.jqgrid.css with the same definitions for .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;
}

满code，你会发现下面

The full code you will find below

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));
}

在code口设置在列 invdate 附加信息和金额页脚。

In the code I set additional information in columns invdate and amount of the footer.

这篇关于如何创建的jqGrid 2尾行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！