jqGridサブグリッドの列をカスタマイズする

Question

私はthis answerからコードを取得しました。可能性があるかどうかを確認するために、最初の画像のようにしています（JavaScript、HTML、CSSなど）。

これは今までの私の進歩です。 は、私は、ヘッダーに詳細のテキストを置く：

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

は、私が最初の列の幅を変更：

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

私はすべての場所での要素の束の幅を変更した場合、私は3枚目の画像をもたらすために取得することができ、それが正しい方法であるかどうかはわかりません。私は水平スクロールバーを取り除くことはできません。

詳細テキストをプラス記号ではなく最初の列のすべてのセルに入れる方法はわかりませんが、プラス記号はそこにとどまることができます。

そして、どのように最後の代わりに、最初になるように、「サブグリッド」欄を切り替えるためには、私が何年も前に、あなたは一例として使用する答えを、書いた...完全に私の知識を超えて

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が

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

のような例のために定義される単純なフォーマッタを

formatter: function() { 
    return details; 
} 

使用することができます固定テキストDetailsの列を持っていると定義され、クラスmylink（私はFont Awesomeアイコンを使用しました）

ここでは、 "subgrid"カラムを非表示にして、または-というアイコンで隠しセルの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」のクリックした後一つは以下のように表示されます。