Groupe de colonnes jqGrid

Votre question n’est pas nouvelle. Plusieurs fois, la demande de fonctionnalité correspondante a été demandée dans le forum sortingrand ou sur le stackoverflow. Je donne une autre réponse sur la question proche quelque temps auparavant.

Après avoir lu votre question, j’ai décidé de ne pas créer une solution parfaite prenant en charge toutes les fonctionnalités de jqGrid (ce qui est trop difficile à la fois). Au lieu de cela, je décide de créer une solution qui peut déjà être utilisée dans de nombreux cas, mais qui présente certaines ressortingctions.

La démo montre mes premiers résultats:

Les ressortingctions:

• les colonnes de la grid ne peuvent pas être redimensionnées. J’utilise dans la démo le cmTemplate: {resizable: false} pour définir resizable: false dans toutes les colonnes de la grid.
• sortable: true n’est pas supporté
• showCol , hideCol ou columnChooser ne sont actuellement pas pris en charge, mais je suis sûr que l’on peut résoudre rapidement les problèmes.
• les colonnes sur lesquelles on placera un en-tête de colonne supplémentaire doivent avoir la même largeur . Si les colonnes ont des valeurs de largeur différentes, la largeur totale de la colonne sera automatiquement divisée entre les colonnes.

D’un autre côté, tout fonctionne sans problème dans tous mes tests avec d’autres options populaires comme shrinkToFit: false , autowidth: true ou le changement de la largeur de la grid en respectant la méthode setGridWidth (avec ou sans réduction).

Parlons d’abord de l’utilisation de la fonctionnalité. J’ai écrit la fonction insertColumnGroupHeader que j’utilise dans l’exemple ci-dessus en tant que

 insertColumnGroupHeader(grid, 'amount', 3, 'Information about the Price'); 

Il insère un en-tête de colonne supplémentaire avec le fragment HTML ” Informations sur le prix ” sur 3 colonnes commençant par la colonne “montant”. Donc, l’utilisation est assez simple. Vous pouvez bien sûr utiliser n’importe quel texte tel que “Informations sur le prix” comme en-tête de colonne supplémentaire.

La fonction insertColumnGroupHeader a le code suivant:

 var denySelectionOnDoubleClick = function ($el) { // see https://stackoverflow.com/questions/2132172/disable-text-highlighting-on-double-click-in-jquery/2132230#2132230 if ($.browser.mozilla) {//Firefox $el.css('MozUserSelect', 'none'); } else if ($.browser.msie) {//IE $el.bind('selectstart', function () { return false; }); } else {//Opera, etc. $el.mousedown(function () { return false; }); } }, insertColumnGroupHeader = function (mygrid, startColumnName, numberOfColumns, titleText) { 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"); mygrid.prepend(thead); $tr = $(""); for (i = 0; i < colModel.length; i++) { $th = $(ths[i].el); cmi = colModel[i]; if (cmi.name !== startColumnName) { if (skip === 0) { $th.attr("rowspan", "2"); } else { denySelectionOnDoubleClick($th); $th.css({"padding-top": "2px", height: "19px"}); $tr.append(ths[i].el); skip--; } } else { colHeader = $('' + titleText + ''); denySelectionOnDoubleClick($th); $th.before(colHeader); $tr.append(ths[i].el); skip = numberOfColumns - 1; } } mygrid.children("thead").append($tr[0]); }; 

De plus, il était nécessaire de modifier le code jqGrid. Vous pouvez télécharger la version modifiée (la modification de la version 4.1.2) de jquery.jqGrid.src.js partir d’ ici . Les changements consistent en deux blocs. D’abord j’ai changé le code de la fonction sortData , les lignes 1874 – 1884

 var thd= $("thead:first",ts.grid.hDiv).get(0); $("tr th:eq("+ts.p.lastsort+") span.ui-grid-ico-sort",thd).addClass('ui-state-disabled'); $("tr th:eq("+ts.p.lastsort+")",thd).attr("aria-selected","false"); $("tr th:eq("+idxcol+") span.ui-icon-"+ts.p.sortorder,thd).removeClass('ui-state-disabled'); $("tr th:eq("+idxcol+")",thd).attr("aria-selected","true"); if(!ts.p.viewsortcols[0]) { if(ts.p.lastsort != idxcol) { $("tr th:eq("+ts.p.lastsort+") span.s-ico",thd).hide(); $("tr th:eq("+idxcol+") span.s-ico",thd).show(); } } 

à ce qui suit:

 var previousSelectedTh = ts.grid.headers[ts.p.lastsort].el, newSelectedTh = ts.grid.headers[idxcol].el; $("span.ui-grid-ico-sort",previousSelectedTh).addClass('ui-state-disabled'); $(previousSelectedTh).attr("aria-selected","false"); $("span.ui-icon-"+ts.p.sortorder,newSelectedTh).removeClass('ui-state-disabled'); $(newSelectedTh).attr("aria-selected","true"); if(!ts.p.viewsortcols[0]) { if(ts.p.lastsort != idxcol) { $("span.s-ico",previousSelectedTh).hide(); $("span.s-ico",newSelectedTh).show(); } } 

Ensuite, j’ai défini la fonction getColumnHeaderIndex comme suit:

 var getColumnHeaderIndex = function (th) { var i, headers = ts.grid.headers, ci = $.jgrid.getCellIndex(th); for (i = 0; i < headers.length; i++) { if (th === headers[i].el) { ci = i; break; } } return ci; }; 

et modifié les lignes 2172 et 2185 de grid.base.js de

 var ci = $.jgrid.getCellIndex(this); 

à

 var ci = getColumnHeaderIndex(this); 

C'est tout. Les modifications décrites ci-dessus ne doivent avoir aucune influence négative sur le code jqGrid d'origine et peuvent être utilisées normalement. Je publierai ma suggestion la prochaine fois sur le forum sortingrand.

MISE À JOUR : Une autre version de la démo permet de redimensionner toutes les colonnes à l'exception des colonnes contenant les en-têtes. Dans la version, toutes les colonnes sur lesquelles on placera un en-tête de colonne supplémentaire doivent avoir la même largeur. La largeur des colonnes non divisée automatiquement entre les colonnes . Vous devez définir la même largeur de colonne manuellement .

UDPATED 2 : Je souhaite informer de l’avancement de la création d’une version plus avancée de jqGrid multiheader. Tout d'abord, wildraid a posté une solution très intéressante Voir sa démo ici . En passant, si l’on utilise avec la méthode jqGrid avec les corrections que j’ai suggérées (voir ci-dessus), le problème du sorting des icons dans la démo sera résolu. Voir ici la démo en guise de conformation.

Après cela, je travaille un peu plus sur la réduction des ressortingctions dans mon approche multicolonne qui utilise rowSpan pour augmenter la hauteur des colonnes. Voici mon résultat intermédiaire actuel: la nouvelle démo . La nouvelle démo fonctionne déjà très bien dans Internet Explorer 9/8, Firefox et Opera. Dans les navigateurs Webkit (Google Chrome et Safari), la ressortingction ci-dessus est toujours mentionnée (les en-têtes de colonne contenant plusieurs en-têtes doivent avoir la même taille et ne pas être redimensionnables). La démo a l’ air bien, compte tenu des ressortingctions, et elle est esthétique dans les navigateurs Web basés sur Webkit. Néanmoins, vous pouvez voir des progrès dans le temps de sorting.

Je prévois d'augmenter la hauteur de la zone redimensionnable utilisée pour redimensionner les colonnes en fonction de la démo de la réponse . L'utilisation de nombreux en-têtes sur les en-têtes de colonnes sera également prise en charge. ColumnChooser ou showCol / hideCol seront également pris en charge. Le plus intéressant pour moi maintenant est de trouver un moyen clair d’implémenter les en-têtes de colonnes à plusieurs rowSpan à l’aide de rowSpan dans les navigateurs Webkit (Google Chrome et Safari). Probablement que quelqu'un d'autre trouvera une solution? C'est la raison principale pour laquelle j'ai décidé de partager ici les résultats non complétés.

MISE À JOUR 3 : Les modifications apscopes au code de jqGrid sont incluses (voir ici ) dans le code principal de jqGrid. J'ai amélioré la solution que j'ai décrite ici à ceci et à ces démos. La deuxième démo augmente la largeur de la grid si la largeur de la colonne est augmentée. Personnellement, j'aime le comportement.

MISE À JOUR 4 : La prochaine version de la démo que vous pouvez voir ici . Il a une option booléenne (le paramètre useColSpanStyle ) qui définit si colspan doit être utilisé ou non. Avec la valeur false du paramètre, les résultats seront les suivants .

Connexe: jqGrid Grouping Without Subgrids?

Pour ce faire, il est possible d’atteindre cet objective en modifiant la sortie HTML de jqgrid en appelant une méthode après le chargement des données de la grid. Vous pouvez accéder à l’en-tête de colonne par le préfixe “jqgh_” suivi de la valeur colName de jgrid. Une fois que vous avez un ensemble d’éléments, vous pouvez les modifier.

Pas le meilleur moyen évidemment, mais pourrait fonctionner.

Comme dans les versions ultérieures de jqGrid, la solution d’Oleg est devenue officielle 🙂

Je le teste sur la v4.4.4, mais devrait fonctionner sur tous les 4.x

Et il supporte le sorting, même si les docs disent le contraire (ils devraient vraiment mettre à jour la référence de l’API)

vérifier la référence officielle ici

pas le premier Oleg à devenir officiel, vous devez être fier compagnon!