jQgrid: intestazioni di righe di colonne multiple

Question

Sto cercando di estendere il mio jQGrid per avere più righe per l'intestazione.

Si sarà simile a questa

   ----------------------- 
Level 1 - > | Application   | 
       ----------------------- 
Level 2 - > |Code | Name  | 
       ----------------------- 
       | 0002827| Mobile Phone1 
       | 0202827| Mobile Phone2 
       | 0042827| Mobile Phon3e 
       | 0005827| Mobile Phone4 
       | 0002627| Mobile Phon5e 
       | 0002877| Mobile Phone6 
       | 0002828| Mobile Phone7 

mi chiedo come fare questo con jqGrid 3.8.2? Qualche idea?

Answer 1

Il problema non è davvero così facile come sembra a prima vista. Ho cercato di trovare una soluzione semplice, ma il risultato migliore che ho trovato si può vedere here:

L'ordine delle intestazioni (livello 1 e 2) non è come si vorrebbe avere. Altri tentativi come this o this sono errati perché l'ordinamento e il ridimensionamento della colonna non sono più corretti.

Per la comprensione: la griglia sposta il <thead>fuori del tavolo e posti all'interno di separato che sono posti sopra la tabella (vedi here per ulteriori informazioni). Consente di includere alcune informazioni aggiuntive come la barra degli strumenti di ricerca tra l'intestazione della tabella e il corpo della tabella. Altre posizioni nel codice jqGrid come il ridimensionamento delle colonne e l'ordinamento delle colonne non funzionano correttamente se esistono altre intestazioni (una più <tr> con elementi <th>) sopra le intestazioni delle colonne principali. Quindi, solo l'inserimento di intestazioni di colonna aggiuntive sotto le intestazioni delle colonne principali (che non sembra ovviamente bello) non interrompe l'ordinamento e il ridimensionamento delle colonne.

AGGIORNATO: Vedere the answer che forniscono la soluzione del problema con alcune restrizioni.

Answer 2

Secondo Help needed in Multiple column grouping (jQGrid 3.8.2), il team di supporto jqGrid indica:

Questo non è attualmente supportata. Intestazioni multiple di colonne in una singola colonna (sottocolonne) non sono attualmente una funzionalità di jqGrid.

Answer 3

modificato l'idea originale di Oleg e ne ha fatto in una funzione che può fare diverse intestazioni "occupate": campione

function head_groups(mygrid, settings){ 

    var colModel, header, config, ths; 

    if (typeof mygrid == 'string') mygrid = $(mygrid); 

    colModel = mygrid[0].p.colModel; 
    ths = mygrid[0].grid.headers; 
    header = mygrid.closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable > thead"); 

    if (!header.children("tr.head_group").length) { 
     header.find("th").attr('rowspan', 2); 
     header.append('<tr class="head_group"></tr>'); 
    } 

    for (c in settings) { 

     config = settings[c]; // caption, col, span 

     for(var i=0; i<colModel.length; i++) { 

      if (colModel[i].name == config.col) { 
       for(var s=0; s<config.span; s++) { 
        $(ths[i+s].el).removeAttr('rowspan'); 
       } 
       i +=s; // skip unnecessary cycles 
       header.children("tr.head_group").append('<th class="ui-state-default ui-th-ltr" id="span_'+config.col+'" colspan="'+config.span+'" role="columnheader">'+config.caption+'</th>'); 
      } 
     } 
    } 
} 

Usage:

head_groups("table#results", [ 
    {caption: 'Test 1', col: 'num', span: 2}, 
    {caption: 'Result', col: 'sta', span: 3}, 
    {caption: 'Bla bla bla', col: 'bl2', span: 2} 
]); 

si aggiunge anche una classe per l'intestazione riga e ID per le celle di intestazione per alcuni stili o funzionalità speciali.

In realtà questo può essere facilmente integrato nel core jqGrid :)

Answer 4

So che questa è una risposta in ritardo, ma per riferimento futuro header grouping è ora incluso nella versione 4.2.0 di jqGrid

Answer 5

ho modificato il codice di Oleg per poter mostrare il raggruppamento nella prima riga, in pratica ho creato una finta terza fila e ho appena cancellato il testo nella prima riga.

var x = 0; 
insertColumnGroupHeader = function (mygrid, mergeSettingList) { 
    var i, cmi, skip = 0, $tr, colHeader, iCol, $th, 
     colModel = mygrid[0].p.colModel, 
     ths = mygrid[0].grid.headers, 
     gview = mygrid.closest("div.ui-jqgrid-view"), 
    thead = gview.find("table.ui-jqgrid-htable>thead"); 
    $tr = $("<tr>"); 

    var currCaption = ''; 
    var currColumnName = ''; 
    var currSpan = 0; 
    var currSkip = 0; 
    tr = "<tr>"; 
    for (i = 0; i < colModel.length; i++) { 
     $th = $(ths[i].el); 
     cmi = colModel[i]; 

     if (currSkip === 0) { 
      currColumnName = ''; 
      for (j = 0; j < mergeSettingList.length; j++) { 
       if (mergeSettingList[j].col == cmi.name) { 
        currCaption = mergeSettingList[j].caption; 
        currColumnName = mergeSettingList[j].col; 
        currSpan = mergeSettingList[j].span; 
        currWidth = mergeSettingList[j].width; 
        break; 
       } 
      } 
     } 

     if (cmi.name !== currColumnName) { 
      if (currSkip === 0) { 
       $th.attr("rowspan", "2"); 
      } else { 
       // Skip part of group 
       denySelectionOnDoubleClick($th); 
       currSkip--; 
      } 
     } else { 
      denySelectionOnDoubleClick($th); 

      tr += '<th class="ui-state-default ui-th-ltr" colspan="' + currSpan + '" role="columnheader">' + currCaption + '</th>'; 
      currSkip = currSpan - 1; 
     } 
    } 
    tr += "</tr>"; 
    mygrid.closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable > thead").append(tr); 

    $th = $(ths[0].el); 
    tr = "<tr>"; 
    var html = $th.parent().html(); 
    tr += html; 
    tr += "</tr>"; 

    mygrid.closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable > thead").append(tr); 
    for (i = 0; i < colModel.length; i++) { 
     $th = $(ths[i].el); 
     cmi = colModel[i]; 
     $th.empty(); 
     $th.css({"padding-top": "0px", height: "0px", border: "0px"}); 
    } 
} 

Chiamata di esempio.

var mergeParam = [ 
     {caption: ' ', col: 'ActionKey', span: 3}, 
     {caption: 'Planned', col: 'PlannedStartColKey', span: 5}, 
     {caption: 'Actual', col: 'ActualStartColKey', span: 12} 
    ]; 
insertColumnGroupHeader2($(GridNames.Grid), mergeParam);