jQgrid: mehrere Spaltenzeilen

Question

Ich versuche, mein jQGrid zu erweitern, um mehrere Zeilen für den Header zu haben.

Es wird

in etwa so aussehen

   ----------------------- 
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 

Ich frage mich, wie diese 3.8.2 mit jqGrid zu tun? Irgendwelche Ideen?

Answer 1

Das Problem ist wirklich nicht so einfach wie es auf den ersten Blick aussieht. Ich habe versucht, eine einfache Lösung zu finden, aber das beste Ergebnis, das ich gefunden können Sie here sehen:

Die Reihenfolge der Header (Level 1 und Level 2) nicht als eine haben möchte. Andere Versuche wie this oder this sind fehlerhaft, weil die Sortierung und Spaltengrößenänderung nicht richtig funktioniert.

Für das Verständnis: das Gitter bewegt den <thead>außerhalb den Tisch und legt sie im Inneren von separaten , die über dem Tisch angeordnet sind (here für weitere Informationen). Es erlaubt, einige zusätzliche Informationen wie die Suchfunktionsleiste zwischen der Tabellenüberschrift und dem Tabellenkörper einzufügen. Andere Stellen im jqGrid-Code wie Spaltengrößenanpassung und Spaltensortierung funktionieren nicht korrekt, wenn andere Header (eine weitere <tr> mit <th> Elementen) über den Hauptspaltenüberschriften vorhanden sind. Also nur das Einfügen von zusätzlichen Spaltenüberschriften unter die Hauptspalten Header (die natürlich nicht schön aussieht) nicht bricht die Sortierung und die Größenanpassung von Spalten.

AKTUALISIERT: Siehe the answer, die die Lösung des Problems unter einigen Einschränkungen bieten.

Answer 2

Nach Help needed in Multiple column grouping (jQGrid 3.8.2), die jqGrid Support-Team zeigt:

Dies wird derzeit nicht unterstützt. Mehrere Spaltenüberschriften in einer einzelnen Spalte (Unterspalten) sind derzeit keine Funktion von jqGrid.

Answer 3

die ursprüngliche Idee von Oleg Modifizierte und es in eine Funktion aus, die mehrere „überspannt“ Header machen:

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>'); 
      } 
     } 
    } 
} 

Nutzungs Beispiel:

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} 
]); 

Es fügt auch eine Klasse für den Kopf Zeile und IDs für die Header-Zellen für einige Styling oder spezielle Funktionalität.

In der Tat kann dies leicht im jqGrid Kern integriert werden :)

Answer 4

Ich weiß, dass dies eine späte Antwort ist aber für die Zukunft header grouping ist nun in der Version enthalten 4.2.0 von jqGrid

Answer 5

ich die modifizierte Code von Oleg, um die Gruppierung in der ersten Zeile anzeigen zu können, habe ich im Grunde eine dritte Zeile erstellt und den Text in der ersten Zeile gelöscht.

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"}); 
    } 
} 

Beispielanruf.

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