jqgridで2つのフッター行を作成する方法

Question

私はjqgridでASP.NET WEB APIを使用しています。

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

ネットで少し検索すると、「可能ではない」とのリンク（2010）が表示されました。回答が2010年であると思っていますが、今はいくつかの回避策があるかもしれませんこれを可能にした。

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

私はデータを渡すことができています、現在のページに

ページのすべてに存在するデータのための

総計をデータプリセットのための2つの行

• 合計を表示したいですデータを読み取るには、このデータを使用してjqgridで2つのフッター行を作成する方法が問題です。

  どのような考えですか？

Answer 1

私は質問が面白い見つけるので、私は、二列のフッターの可能な実装から1を示しているthe demoを作成しました：

主なアイデアはどこのテーブルの2行目を追加することです標準フッターは既に存在します。 jqGridコードの他の部分で発生する可能性のある問題を解消するために、私はカスタム行のクラス名footrowをmyfootrowに置き換えました。元tooter私は.ui-jqgrid tr.myfootrow tdについて同じ定義を持つui.jqgrid.cssから.ui-jqgrid tr.footrow tdのコピーが含まれているように、第2フッタに同じCSSの設定を持っている：

.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に追加情報を設定しました。