如何在jqgrid中創建兩個頁腳行

我正在使用ASP.NET WEB API的jqgrid。如何在jqgrid中創建兩個頁腳行

我想在jqgrid的頁腳中添加兩行。

因此，網絡上的一些搜索帶給我這個鏈接（2010年），說「這是不可能的」，我認爲答案是2010年，可能現在有些事情/一些解決方法可能已經使這成爲可能。

我想在頁腳顯示什麼？

我想顯示兩行

總在當前頁面數據預設
總計爲存在於所有頁面的數據

我能夠傳遞數據並讀取數據，問題是如何使用這些數據並在jqgrid中創建兩個頁腳行。

有什麼想法？

來源

2012-12-04 Yasser

檢查此鏈接：http://stackoverflow.com/questions/7392987/jqgrid-total-amount-row –

我發現這個問題有意思，所以我創建the demo這表明從可能實現的2列的頁腳之一：

enter image description here

主要的想法是，添加第二行中的表，其中標準頁腳已經存在。爲了消除jqGrid代碼其他部分可能出現的問題，我將footrow自定義行中的類名替換爲myfootrow。具有相同的CSS設置爲原始tooter有我包括的.ui-jqgrid tr.footrow td從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-04 12:35:15 Oleg

很好的回答@ Oleg，但它有點晚了..我已經創建了一個（骯髒的）解決方法。我只創建一個頁腳，每個單元格有兩個值，其中包含標籤，然後使用一些CSS來獲得兩個頁腳行的視覺效果。我接受這個答案，並會看看我是否有時間更改我的代碼。這個答案必須來自你只有奧列格，我已閱讀你發佈的所有jqgrid答案。我也要感謝你所有的答案。 – Yasser

@亞瑟：不客氣！ – Oleg

如何在jqgrid中創建兩個頁腳行

回答

相關問題