jqGrid subgrid

Question

'dan sütun başlıklarını kaldır jqGrid-4.4.1 subGrid işlevini kullanıyorum.

Benim durumumda, her satır için subGrid sütun başlıklarını kaldırmak istiyorum.

Bu link den

var grid = $("#list"); 
var gview = grid.parents("div.ui-jqgrid-view"); 
gview.children("div.ui-jqgrid-hdiv").hide(); 

çalıştı. Ancak, alt tablodan ziyade ana tablonun başlığını kaldırır.

HTML tabanlı bir alternatif buldum. How to remove the table column headers from Jqgrid subgrid

Ayrıca, Karot'u nasıl kaldırabilirim, satır genişletildiğinde ilk sütundan kaldırılır.

İşte fotoğraf çekimi. Kırmızı ile işaretli kenarlığı kaldırmak istiyorum. Genelde

Answer 1

Sütun başlıkları gizlemek için doğru şekilde kullanabilirsiniz. Tek sorun, doğru ızgarayla gizlemeyi kullanmanız gerektiğidir. Tipik olarak, bir kullanıcı subGridRowExpanded geri aramada ızgara olarak alt ızgara oluşturur. jqGrid, yeni alt ızgara yerleştirmeniz gereken <div>'u oluşturun. subGridRowExpanded geri çağrısının ilk parametresi olan divun id'u (daha fazla ayrıntı için bkz. the documentation). Bu yüzden bir tanesi, div'un kimliğine dayanan tipik olarak oluşturulmuş bir kimliğe sahip subgrid oluşturur. 'u #list yerine altgridinin alt kümesini kullanacak olursanız, alt bölümün sütun başlıklarını gizleyebilirsiniz.

Aşağıda

Ben GÜNCELLEME the demo

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", 
      subgridData: [ 
       { id: "10", c1: "ga", c2: "gb" }, 
       { id: "20", c1: "ha", c2: "hb" }, 
       { id: "30", c1: "ia", c2: "ib" } 
      ] 
     } 
    ], 
    $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, 
    rownumbers: 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, 
      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}); 

için kullanılan koddur:

The demo

böyle uygulanmasını göstermek The answer boyutlandırma sonra subgrid sütunları yeniden boyutlandırma nasıl uygulanacağını gösterir Ana ızgara kolonlarının