jqGrid usuń nagłówki kolumn z subgrid

Question

Używam funkcji subGrid jqGrid-4.4.1.

W moim przypadku chcę usunąć nagłówki kolumn od subGrid dla każdego wiersza.

Próbowałem

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

z tego link. Ale, Usuwa nagłówek głównego stołu, zamiast podkradać.

Znalazłem alternatywę, ale opartą na HTML. How to remove the table column headers from Jqgrid subgrid

Ponadto, Jak mogę usunąć carot znak z pierwszej kolumny, gdy wiersz jest rozwinięty.

Tutaj jest migawka. Chcę usunąć granicę zaznaczoną na czerwono.

Answer 1

W ogóle używać poprawny sposób ukryć nagłówki kolumn. Jedynym problemem jest to, że musisz używać ukrywania z właściwą siatką. Zazwyczaj tworzy się podsieć jako sieć wewnątrz wywołania zwrotnego subGridRowExpanded. jqGrid utworzyć <div> gdzie należy umieścić nowy subgrid. id elementu div, który otrzymujesz jako pierwszy parametr wywołania zwrotnego subGridRowExpanded (więcej szczegółów znajdziesz w artykule the documentation). Tak więc jeden tworzy podgrid z pewnym id skonstruowanym zwykle na podstawie identyfikatora div. Jeśli użyjesz , identyfikator podkwasu zamiast #list będziesz mógł ukryć nagłówki kolumn subgridu.

The demo wykazać taką realizacji:

Poniżej znajduje się kod, który kiedyś dla 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}); 

AKTUALIZACJA: The answer pokazuje jak wdrożyć zmiany rozmiaru kolumn subgrid po zmianie rozmiaru kolumn siatki głównej.