Comment ajuster la largeur de colonne de jqgrid APRÈS que les données soient chargées?

Mon but ultime est de faire en sorte que jqgrid définisse automatiquement la largeur de la colonne en fonction du contenu des données. Dans le cadre du chemin pour y aller, je dois pouvoir définir la largeur de la colonne APRÈS que les données soient chargées, heure à laquelle je saurais quelle est la largeur maximale de chaque colonne. Mais une fois que je connais la largeur maximale d’une colonne, comment puis-je définir la largeur de chaque colonne dans l’événement “loadComplete” et faire en sorte que la grid soit actualisée avec la nouvelle largeur de chaque colonne? La plupart des messages que j’ai trouvés sur le net concernent la largeur totale de la grid. Ce que je veux, c’est définir la largeur de chaque colonne et faire en sorte que la barre de défilement horizontale apparaisse automatiquement si la largeur totale est trop longue.

Mise à jour : Après avoir vu la démo impressionnante d’Oleg, j’ai fini par le coder dans dqGrid (4.5.4) lui-même. Voici ce que j’ai fait:

Localiser la fonction

addJSONData = function(data,t, rcnt, more, adjust) {

puis localiser dans cette fonction

  for (j=0;j<rowReader.length;j++) { v = $.jgrid.getAccessor(cur,rowReader[j]); rd[ts.p.colModel[j+gi+si+ni].name] = v; rowData.push(addCell(idr, v, j + gi + si + ni, i + rcnt, cur, rd)); // my addtion: stores the largest header size var newWidth = v.length * 6; if (ts.grid.headers[j].width < newWidth) { ts.grid.headers[j].width = newWidth; } }

Puis juste avant la fin de} de cette fonction, ajoutez ce qui suit

  // my addition: invoke the resizing logic for (j = 0; j < rowReader.length; j++) { ts.grid.resizing = { idx: j }; ts.grid.dragEnd(); }

Après cela, la grid ajustera la largeur de chaque colonne en fonction du contenu. Une chose sur laquelle j’ai encore besoin d’aide est de savoir comment calculer précieusement la nouvelle largeur. Mon calcul actuel codé en dur

var newWidth = v.length * 6;

n’est évidemment pas très évolutif.

La réponse courte à votre question pourrait être: jqGrid ne fournit aucune méthode permettant de changer la largeur de la colonne après la création de la grid. Dans de tels cas, je rappelle l’aphorisme bien connu de Kozma Prutkov : “Qui vous empêche d’inventer la poudre à canon imperméable?”. Cela signifie à peu près ce qui suit: si quelque chose n’existe pas, il peut encore être inventé. J’ai donc écrit cette méthode sur la base de la solution suggérée dans la réponse, dans laquelle j’ai suggéré d’appeler la méthode interne dragEnd pour redimensionner la colonne de la grid.

La démonstration démontre l’utilisation de la nouvelle méthode. La démo permet de choisir une colonne de la grid puis de changer la largeur en nouvelle valeur que vous spécifiez:

entrez la description de l'image ici

Le code de la nouvelle méthode que vous pouvez trouver ci-dessous

 $.jgrid.extend({ setColWidth: function (iCol, newWidth, adjustGridWidth) { return this.each(function () { var $self = $(this), grid = this.grid, p = this.p, colName, colModel = p.colModel, i, nCol; if (typeof iCol === "ssortingng") { // the first parametrer is column name instead of index colName = iCol; for (i = 0, nCol = colModel.length; i < nCol; i++) { if (colModel[i].name === colName) { iCol = i; break; } } if (i >= nCol) { return; // error: non-existing column name specified as the first parameter } } else if (typeof iCol !== "number") { return; // error: wrong parameters } grid.resizing = { idx: iCol }; grid.headers[iCol].newWidth = newWidth; grid.newWidth = p.tblwidth + newWidth - grid.headers[iCol].width; grid.dragEnd(); // adjust column width if (adjustGridWidth !== false) { $self.jqGrid("setGridWidth", grid.newWidth, false); // adjust grid width too } }); } });

Vous pouvez inclure la méthode dans votre projet, puis utiliser la méthode setColWidth . Le premier paramètre de la méthode est soit l’index de la colonne, soit le nom de la colonne. Le deuxième paramètre est un nombre qui spécifie une nouvelle valeur de la largeur de la colonne. Le troisième paramètre est facultatif. Si ce n’est pas spécifié, la largeur de la grid sera ajustée automatiquement en fonction de la modification de la largeur de la colonne. Donc, la grid n’aura pas de barres de défilement si elle ne l’a pas fait avant de changer la largeur de la colonne. Si vous souhaitez conserver la largeur de grid d’origine, vous devez spécifier false comme troisième paramètre de la méthode setColWidth .

MISE À JOUR: La dernière version (mise à jour) de setColWidth peut être téléchargée à partir de github . La nouvelle version gratuite de jqGrid en cours de développement inclut la méthode et le module de base de jqGrid. Donc, si vous utilisez jquery.jqGrid.min.js , jquery.jqGrid.min.map et jquery.jqGrid.src.js partir d’ici, vous n’avez pas besoin d’inclure jQuery.jqGrid.autoWidthColumns.js avec setColWidth tant que plugin.

MISE À JOUR 2: J’ai modifié le code ci-dessus afin qu’il corresponde à la dernière version de setColWidth que j’ai publiée sur github .

MISE À JOUR 3: La méthode setColWidth est incluse dans le fork jqGrid gratuit de jqGrid, que je développe depuis la fin de 2014. Il comprend de nombreuses autres nouvelles fonctionnalités telles que l’extension de la largeur de la colonne en fonction de la largeur du contenu de la colonne. Voir l’article du wiki pour plus de détails.