Comprendre les comportements de largeur de colonne JQGrid

J'ai une grille arborescente avec de nombreuses colonnes, toutes avec une largeur spécifiée. Et garçon, il semble terrible car les en-têtes ne sont pas synchronisés avec les colonnes ci-dessous, même si j'ai des données courtes.

Plus précisément, si le titre de titre de colonne est plus court que cette largeur de colonne, l'en-tête diminue jusqu'à la taille du texte dans l'en-tête.

Comment puis-je faire l'en-tête exactement de la même taille que la colonne?

Question 2: J'ai remarqué que bien que la documentation indique que l'option "largeur" des colonnes est en pixels, je peux voir que ce n'est en réalité pas en pixels, mais seulement un nombre par rapport à d'autres largeurs en grille. Par exemple, si tous les champs sont de taille 10, ils seront tous égaux, mais pas 10 pixels de largeur.

Merci d'avance pour les éclaircissements, car cette question simple semble avoir des racines plus profondes que je ne le pensais.

Essayez de jouer avec les paramètres 'automaticwidth' et 'shrinkToFit' jqGrid. Par exemple, si 'shrinkToFit' est vrai, la largeur des colonnes sera modifiée comme si les largeurs initiales définissaient le pourcentage. Lire la suite ici .

J'ai eu le même problème. Il s'est avéré être les définitions CSS existantes, par défaut du site, pour le remplissage sur les cellules de la table. Assurez-vous que votre rembourrage est cohérent entre vos étiquettes th et td. J'ai mis un div autour de la grille avec une classe de div et j'ai ajouté ce qui suit à mon CSS:

.grid td, .grid th { padding: 1pt 1ex !important; }

 colModel: [ { name: 'Email', index: 'Email', editable: true, edittype: 'custom', width: 220, editoptions: { custom_element: function(value, options) { return EmailAddressCustomElement(value, options); }, custom_value: function(elem) { var inputs = $("input", $(elem)[0]); return inputs[0].value; } } }, { name: 'LocationAndRole', index: 'LocationAndRole', editable: true, align: "left", edittype: "button", width: 170, editoptions: { value: 'Edit Location And Role', dataEvents: [{ type: 'click', fn: function(e) { ShowUsersLocationAndRoles(e); } }, ] } }, gridComplete: function() { var objRows = $("#list_accounts tr"); var objHeader = $("#list_accounts .jqgfirstrow td"); if (objRows.length > 1) { var objFirstRowColumns = $(objRows[1]).children("td"); for (i = 0; i < objFirstRowColumns.length; i++) { $(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width")); } } }

J'avais le même problème. J'ai résolu cette question en ajoutant 4 lignes de code dans GridComplete. Ces 4 lignes changeront le style des td de la zone de contenu [la modification de style de la première ligne td suffit]. C'est un problème dans jqgid. Ce qui définit réellement les td dans le '' mais ce style n'est pas reflété dans les td de la zone de contenu. Lors du développement de jqgrid, ils ont supposé que la largeur entière des colonnes s'effectuerait en modifiant les largeurs des tds d'une ligne, mais elles ne changent que pour '' qui est le problème persistant ici.

Définissez les largeurs des colonnes dans ColModel:

 colModel: [ { name: 'Email', index: 'Email', editable: true, edittype: 'custom', width: 220, editoptions: { custom_element: function(value, options) { return EmailAddressCustomElement(value, options); }, custom_value: function(elem) { var inputs = $("input", $(elem)[0]); return inputs[0].value; } } }, { name: 'LocationAndRole', index: 'LocationAndRole', editable: true, align: "left", edittype: "button", width: 170, editoptions: { value: 'Edit Location And Role', dataEvents: [{ type: 'click', fn: function(e) { ShowUsersLocationAndRoles(e); } }] } },

Ajoutez le code ci-dessous dans l'événement gridComplete:

 gridComplete: function() { var objRows = $("#list_accounts tr"); var objHeader = $("#list_accounts .jqgfirstrow td"); if (objRows.length > 1) { var objFirstRowColumns = $(objRows[1]).children("td"); for (i = 0; i < objFirstRowColumns.length; i++) { $(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width")); } } }

J'espère que le code ci-dessus vous aidera à résoudre le problème.

 <div id="pager"></div> <span id='ruler' class='ui-th-column' style='visibility:hidden;font-weight:bold'></span> <script type="text/javascript"> var colNamesData = ['Inv No','Date Of the Transaction', 'Amount That Is Owed']; var colModelData = [ {name:'invid', index:'invid', width:55}, {name:'invdate', index:'invdate', resizeToTitleWidth:true}, {name:'amount', index:'amount', align:'right', resizeToTitleWidth:true}]; jQuery(document).ready(function() { var ruler = document.getElementById('ruler'); for (var i in colNamesData) { if (colModelData[i].resizeToTitleWidth != true) { continue; } // Measure the title using the ruler span ruler.innerHTML = colNamesData[i]; // The +26 allows for padding and to fit the sorting UI var newWidth = ruler.offsetWidth + 26; if (newWidth < 100) { // Nothing smaller than 100 pixels newWidth = 100; } colModelData[i].width = newWidth; } jQuery("#list").jqGrid({ ... colNames: colNamesData, colModel: colModelData, shrinkToFit:false, ... }); </script>

Définissez la largeur de chaque colonne en pourcentage par CSS

Ajoutez les classes css comme ci-dessous

 table.ui-jqgrid-htable thead{display:table-header-group} #JQGridClientMaster td, #ui-jqgrid-htable th{display:table-cell}

Réglez maintenant la largeur sur chaque colonne et

 #JQGridClientMaster td:nth-child(1),th#JQGridClientMaster_rn{width:2% !important;}