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

How to create two footer rows in jqgrid

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

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

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

我想在页脚中显示什么？

我想显示两行

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

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

有什么想法吗？

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

主要思想是在已经存在标准页脚的表格中添加第二行。为了消除 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));

}

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

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