La colonne jqGrid n'est pas alignée avec les en-têtes de colonne

Cette question a été posée ici. La colonne jqGrid n'est pas alignée avec les en-têtes de colonne

Mais le style border-right-color ne semble pas fonctionner pour moi.

J'utilise jqGrid 3.8 et IE 8

C'est ma configuration pour jqGrid

shrinkToFit:true, colModel :[ {name:'leid', index:'leid', width:70, label:'LEID'}, {name:'cdr', index:'cdr', width:40, label:'CDR'}, {name:'name', index:'name', width:160, label:'Name'}, {name:'country', index:'country', width:98, label:'Country'}, {name:'fc', index:'fc', width:50, label:'FC'}, {name:'bslaMe', index:'bslaMe', width:65, label:'BSLA/ME'}, {name:'business', index:'business', width:130, label:'Business'}, {name:'amtFc', index:'amtFc', width:98, label:'Amt(FC)', align:'right', formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "", suffix:"", defaultValue: '0'} }, {name:'amtUsd', index:'amtUsd', width:98, label:'Amt(Cur)', align:'right', formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "", suffix:"", defaultValue: '0'} }, {name:'cashPoolHeader', index:'cashPoolHeader', width:120, label:'Cash Pool Header'}, {name:'cashPoolCDR', index:'cashPoolCDR', width:60, label:'CP CDR'}, {name:'cashPoolName', index:'cashPoolName', width:160, label:'Cash Pool Name'} ], 

Des pensées?

J'ai eu le même problème, j'ai résolu ce problème en ajoutant 4 lignes de code dans gridComplete , ces 4 lignes changeront le style de td 's de la zone de contenu [la modification de style de la première ligne td est suffisante].

Il s'agit d'un problème dans jqgid, qui définit réellement les td dans le <thead> mais ce style ne reflète pas les td de la zone de contenu. Lors du développement de jqgrid, ils ont supposé que la largeur totale des colonnes s'effectuera en modifiant les largeurs des td s d'une ligne, mais elles n'ont changé que pour <thead> qui est le problème persistant ici.

Définissez les largeurs des colonnes dans le 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.

Regardez mon ancienne réponse qui décrit comment modifier l'alignement de l'en-tête de colonne.

Ce n'est pas ce que vous voulez, alors vous devez publier une image qui montre comment ressemblent la grille et ajoutez dans votre question le code complet de votre grille, y compris le code HTML, les informations sur la version de jqGrid que vous utilisez et les données de test. Donc tout ce que l'on doit reproduire votre problème.

Le code ci-dessus ne fonctionnait pas pour moi

Je l'ai changé un peu: fonctionner correctement avec 4.6.0

 var objHeader = $("table[aria-labelledby=gbox_" + gridName+ "] tr[role=rowheader] th"); for (var i = 0; i < objHeader.length; i++) { var col = $("table[id=" + gridName+ "] td[aria-describedby=" + objHeader[i].id + "]"); var width= col.outerWidth(); $(objHeader[i]).css("width", width); }