自定義jqGrid子網格列

Question

我從this answer獲取代碼，我正在綁定第一張圖片，看看是否有可能（我知道它是，它只是一些JavaScript，HTML和CSS;））。

第二張照片是我迄今取得的進展。 我把詳細文本標題：

$("#list_subgrid").append("Details").css('width', '100px'); 

我改變了第一列的寬度：

$(".jqgfirstrow").find("td:first").css({"height":"0px", "width":"100px"}); 

我能到導致第三張照片，如果我改變一堆元素的寬度所有的地方，但不知道這是正確的方式。我無法擺脫水平滾動條。

不知道如何將詳細信息文本放入第一列中的每個單元格而不是加號，但加號可以保留在那裏。

以及如何切換「亞格」欄目是最後的，而不是最初是完全超出了我的知識......

Answer 1

我寫的答案，你作爲一個例子，很多年前。現在，我只想給子網格數據一起與該行的主要數據的地方，如下面details屬性：

var myGridData = [ 
     // main grid data 
     {id: "10", col1: "11", col2: "12", details: [ 
      // data for subgrid for the id=10 
      {id: "10", c1: "aa", c2: "ab", c3: "ac"}, 
      {id: "20", c1: "ba", c2: "bb", c3: "bc"}, 
      {id: "30", c1: "ca", c2: "cb", c3: "cc"} 
     ]}, 
     {id: "20", col1: "21", col2: "22", details: [ 
      // data for subgrid for the id=20 
      {id: "10", c1: "xx", c2: "xy", c3: "xz"} 
     ]} 
    ]; 

表達$(this).jqGrid("getLocalRow", rowid)獲取數據的項目，$(this).jqGrid("getLocalRow", rowid).details是該行的次網格數據。因此，我們可以像the demo一樣重寫原始示例。

要與固定文本Details列，我們可以使用簡單的格式化

formatter: function() { 
    return details; 
} 

其中details是例如定義像

var details = "<span class='fa fa-fw fa-plus'></span>&nbsp;" + 
        "<span class='mylink'>Details</span>"; 

（I使用Font Awesome圖標）和mylink類等定義

.mylink { text-decoration: underline; } 

現在我們可以隱藏「子網格」列，並通過模擬隱藏單元上的click事件來打開/關閉子網格，其中+或-圖標。我們收到以下完整代碼

var myGridData = [ 
     // main grid data 
     {id: "10", col1: "11", col2: "12", details: [ 
      // data for subgrid for the id=10 
      {id: "10", c1: "aa", c2: "ab", c3: "ac"}, 
      {id: "20", c1: "ba", c2: "bb", c3: "bc"}, 
      {id: "30", c1: "ca", c2: "cb", c3: "cc"} 
     ]}, 
     {id: "20", col1: "21", col2: "22", details: [ 
      // data for subgrid for the id=20 
      {id: "10", c1: "xx", c2: "xy", c3: "xz"} 
     ]} 
    ], 
    $grid = $("#list"), 
    details = "<span class='fa fa-fw fa-plus'></span>&nbsp;" + 
       "<span class='mylink'>Details</span>"; 

$grid.jqGrid({ 
    data: myGridData, 
    colModel: [ 
     { name: "col1", label: "Column 1" }, 
     { name: "col2", label: "Column 2" }, 
     { name: "details", label: "Details", 
      align: "center", width: 70, 
      formatter: function() { 
       return details; 
      } } 
    ], 
    cmTemplate: { width: 200 }, 
    iconSet: "fontAwesome", 
    autoencode: true, 
    sortname: "col1", 
    sortorder: "desc", 
    pager: true, 
    caption: "Demonstrate how to create subgrid from local data", 
    beforeSelectRow: function (rowid, e) { 
     var $self = $(this), 
      p = $self.jqGrid("getGridParam"), 
      $td = $(e.target).closest("tr.jqgrow>td"), 
      cm = $td.length > 0 ? p.colModel[$td[0].cellIndex] : null, 
      cmName = cm != null ? cm.name : null; 
     if (cmName === "details") { 
      // simulate opening the subgrid 
      $($td.parent()[0].cells[p.iColByName.subgrid]).click(); 
      // inverse +/- 
      var $plusMinus = $td.find("span.fa"); 
      if ($plusMinus.hasClass("fa-minus")) { 
       $plusMinus.removeClass("fa-minus").addClass("fa-plus"); 
      } else { 
       $plusMinus.removeClass("fa-plus").addClass("fa-minus"); 
      } 
     } 

     return true; 
    }, 
    subGrid: true, 
    subGridRowExpanded: function (subgridDivId, rowid) { 
     var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"), 
      $subgridDiv = $("#" + subgridDivId), 
      subgridData = $(this).jqGrid("getLocalRow", rowid).details; 

     $subgridDiv.closest(".subgrid-data").prev(".subgrid-cell").remove(); 
     var colspan = $subgridDiv.closest(".subgrid-data").attr("colspan"); 
     $subgridDiv.closest(".subgrid-data").attr("colspan", parseInt(colspan, 10) + 1); 
     $subgridDiv.append($subgrid); 
     $subgrid.jqGrid({ 
      idPrefix: rowid + "_", 
      data: subgridData, 
      colModel: [ 
       { name: "c1", label: "Col 1" }, 
       { name: "c2", label: "Col 2" }, 
       { name: "c3", label: "Col 3" } 
      ], 
      iconSet: "fontAwesome", 
      autowidth: true, 
      autoencode: true, 
      sortname: "c1" 
     }); 
     $subgrid.jqGrid("setGridWidth", $subgridDiv.width() - 1); 
    } 
}).jqGrid("hideCol", "subgrid"); 

相應的演示可以看到here。點擊後「+ Detailes」一會看到以下內容：