jqGrid rimuove le intestazioni di colonna da subgrid

Question

Sto utilizzando la funzionalità subGrid jqGrid-4.4.1.

Nel mio caso, desidero rimuovere le intestazioni di colonna da subGrid per ogni riga.

ho cercato

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

da questo link. Ma, rimuove l'intestazione della tabella principale, piuttosto che la subgrid.

Ho trovato un'alternativa ma basata su HTML. How to remove the table column headers from Jqgrid subgrid

Inoltre, come posso rimuovere il segno carot dalla prima colonna quando la riga è espansa.

Ecco l'istantanea. Voglio rimuovere il bordo contrassegnato in rosso.

Answer 1

In generale si utilizza il modo corretto per nascondere le intestazioni delle colonne. L'unico problema è che devi usare nascondigli con la griglia corretta. Generalmente si crea una subgrid come griglia all'interno della richiamata subGridRowExpanded. jqGrid crea <div> dove devi inserire una nuova subgrid. Il id del div ottenuto come il primo parametro della richiamata subGridRowExpanded (vedere the documentation per ulteriori dettagli). Quindi si crea una subgrid con qualche id costruito tipicamente in base all'id del div. Se si utilizza l'ID della subgrid anziché #list, sarà possibile nascondere le intestazioni delle colonne della subgrid.

The demo dimostrare tale attuazione:

seguito è il codice che ho usato per 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}); 

AGGIORNAMENTO: The answer mostra come implementare ridimensionamento delle colonne di sottogriglia dopo il ridimensionamento delle colonne della griglia principale.