2016-10-13 15 views
1

私はサブグリッドにデータがない場合、私はサブグリッドで空のグリッドを取得しています。また、展開アイコンを非表示にする必要があります。以下は、私が使用したコードです。jqGrid subGrid非表示にする方法 "+"データがない場合は展開アイコン

$(document).ready(function() { 
    'use strict'; 
    var myData = [ 
      { 
       id: "10", 
       c1: "My Value 1", 
       c2: "My Value 1.1", 
       subgridData: [ 
        { id: "10", c1: "aa", c2: "ab" }, 
        { id: "20", c1: "ba", c2: "bb" }, 
        { id: "30", c1: "ca", c2: "cb" } 
       ] 
      }, 
      { 
       id: "20", 
       c1: "My Value 2", 
       c2: "My Value 2.1", 
       subgridData: [ 
        { id: "10", c1: "da", c2: "db" }, 
        { id: "20", c1: "ea", c2: "eb" }, 
        { id: "30", c1: "fa", c2: "fb" } 
       ] 
      }, 
      { 
       id: "30", 
       c1: "My Value 3", 
       c2: "My Value 3.1" 
      } 
     ], 
     $grid = $("#list"), 
     mainGridPrefix = "s_"; 

    $grid.jqGrid({ 
     datatype: "local", 
     data: myData, 
     colNames: ["Column 1", "Column 2"], 
     colModel: [ 
      { name: "c1", width: 180 }, 
      { name: "c2", width: 180 } 
     ], 
     rowNum: 10, 
     rowList: [5, 10, 20], 
     pager: "#pager", 
     gridview: true, 
     ignoreCase: true, 
     sortname: "c1", 
     viewrecords: true, 
     autoencode: true, 
     height: "100%", 
     idPrefix: mainGridPrefix, 
     subGrid: true, 
     subGridRowExpanded: function (subgridDivId, rowId) { 
      var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"), 
       pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId); 

      $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId)); 
      $subgrid.jqGrid({ 
       datatype: "local", 
       data: $(this).jqGrid("getLocalRow", pureRowId).subgridData, 
       colModel: [ 
        { name: "c1", width: 178 }, 
        { name: "c2", width: 178 } 
       ], 
       height: "100%", 
       rowNum: 10000, 
       autoencode: true, 
       autowidth: true, 
       gridview: true, 
       idPrefix: rowId + "_" 
      }); 
      $subgrid.closest("div.ui-jqgrid-view") 
       .children("div.ui-jqgrid-hdiv") 
       .hide(); 
     } 
    }); 
    $grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false}); 
}); 

次のような出力があります。サブグリッドのデータがない場合は、展開アイコンとサブグリッドを削除する方法。

enter image description here

この動作を実現する方法はあります。私の出力は以下のようになります。

enter image description here

答えて

0

問題の解決策は、バージョンおよび使用jqGridのフォークに依存します。私はfree jqGridフォークを開発し、the answerthe demo参照)で説明したhasSubgridコールバックを実装しました。

入力データの項目には、サブグリッドデータの配列としてsubgridDataプロパティが含まれています。したがって、subgridDataプロパティが定義されている場合にのみサブグリッドを作成し、subgridData.length > 0を作成する必要があります。したがって、あなただけのjqGridの現在のバージョン(4.13.4または4.13.5pre)にアップグレードすると、メイングリッドにオプション

subGridOptions: { 
    hasSubgrid: function (options) { 
     // the options contains the following properties 
     //  rowid - the rowid 
     //  iRow - the 0-based index of the row 
     //  iCol - the 0-based index of the column 
     //  data - the item of the data, with the data of the row 
     var subgridData = options.data.subgridData; 
     return subgridData != null && subgridData.length > 0; 
    } 
} 

を追加する必要があります。コールバックsubGridOptions.hasSubgridは、グリッドデータの作成中にと呼ばれるため、rowattr,cellattr、カスタムフォーマッタのように非常に有効です。

+0

無料のjqGridでサブグリッドヘッダーを非表示にする方法。これで私を助けてくれますか? – Karthikeyan

+0

@カーティケヤン:あなたは大歓迎です! [答え](http://stackoverflow.com/a/14265456/315935)を見てください。 'resizeStop'のコードは、空のjqGridに' setGridWidth'が入っているので非常に簡単です。 – Oleg

関連する問題