JQgrid: en-têtes de ligne à plusieurs colonnes

Le problème n'est vraiment pas si simple qu'il semble à première vue. J'ai essayé de trouver une solution simple, mais le meilleur résultat que j'ai trouvé que vous pouvez voir ici :

L'ordre des en-têtes (niveau 1 et niveau 2) n'est pas comme on le souhaiterait. D'autres tentatives comme celle-ci ou celles- ci sont buggy parce que le redimensionnement de tri et de colonne fonctionne pas plus correctement.

Pour la compréhension: la grille déplace le <thead> dehors de la table et la place à l'intérieur de la partie séparée Qui sont placés au-dessus de la table (voir ici pour plus d'informations). Il permet d'inclure des informations supplémentaires comme la barre d'outils de recherche entre l'en-tête de la table et le corps de la table. D'autres endroits dans le code jqGrid comme le redimensionnement de la colonne et le tri des colonnes fonctionnent correctement s'il existe d'autres en-têtes (un <tr> avec <th> éléments) sur les en-têtes des colonnes principales. Donc, seul l'insertion d'en-têtes de colonnes supplémentaires sous les en-têtes des colonnes principales (ce qui ne semble pas bien, bien sûr) ne brise pas le tri et le redimensionnement des colonnes.

MISE À JOUR: voir la réponse qui fournit la solution du problème sous certaines restrictions.

Je sais que c'est une réponse tardive, mais pour le futur groupe d'en-tête de référence est maintenant inclus dans la version 4.2.0 de jqGrid

Modifié l'idée originale par Oleg et l'a transformé en une fonction qui peut créer plusieurs en-têtes «étendus»:

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

Exemple d'utilisation:

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

Il ajoute également une classe pour la ligne d'en-tête et les ID pour les cellules d'en-tête pour un style ou une fonctionnalité spéciale.

En fait, cela peut être facilement intégré dans le core jqGrid 🙂

Selon l' aide nécessaire dans le regroupement de colonnes multiples (jQGrid 3.8.2) , l'équipe de support de jqGrid indique:

Ce n'est actuellement pas supporté. Plusieurs en-têtes de colonne dans une seule colonne (sous-colonnes) ne sont actuellement pas une fonctionnalité de jqGrid.

J'ai modifié le code d'Oleg pour pouvoir montrer le regroupement dans la première ligne, j'ai fondamentalement créé une troisième rangée factice et j'ai simplement effacé le texte dans la première rangée.

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

Exemple d'appel.

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