6

ASP.NETWEBAPIを使用してjqgridに取り組んでいます。

jqgridのフッターに2行追加したいと思います。

それで、ネットで少し検索すると、「それは不可能です」というこのリンク（2010）にたどり着きました。答えは2010年なので、今では何かがあるかもしれません/これに対して何らかの回避策が可能になっているかもしれません。 。

フッターに何を表示したいですか？

2行表示したい

  • 現在のページにプリセットされているデータの合計
  • すべてのページに存在するデータの総計

データを渡してデータを読み取ることができます。問題は、このデータを使用してjqgridに2つのフッター行を作成する方法です。

何かご意見は ？

4

1 に答える 1

13

興味深い質問だと思ったので、2 行フッターの可能な実装から 1 つを示すデモを作成しました。

ここに画像の説明を入力

主なアイデアは、標準フッターが既に存在するテーブルに 2 番目の行を追加することです。jqGrid コードの他の部分で起こりうる問題を排除するためfootrowに、カスタム行のクラス名を に置き換えましたmyfootrow。2 番目のフッターの CSS 設定を元のトゥーターと同じにするために、 .ui-jqgrid tr.footrow tdfromのコピーを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とamountフッターに追加情報を設定しました。

于 2012-12-04T12:35:15.920 に答える