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

Question

Cette question a été posée ici. jqGrid column not aligned with column headers

Mais le style de bordure-droite-couleur ne semble pas fonctionner pour moi.

J'utilise jqGrid 3.8 et IE 8

Ceci 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'} 
], 

Toute pensée?

Answer 1

Je faisais la même question, je résolu cette question en ajoutant 4 lignes de code dans gridComplete, ces 4 lignes vont changer le style de td « s de la zone de contenu [première ligne td » modification de style s est assez].

Il s'agit d'un problème dans jqgid, qui définit les td à l'intérieur du <thead> mais ce style ne reflète pas la zone de contenu td. Lors du développement de jqgrid, ils ont supposé que la largeur des colonnes entières serait affectée en changeant les largeurs des td s d'une rangée, mais elles ont seulement changé pour <thead>, ce qui est le problème persistant ici.

Set largeur des colonnes du 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 en cas 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.

Answer 2

Regardez mon old answer qui décrit comment changer l'alignement de l'en-tête de colonne. Il n'est pas ce que vous voulez, alors vous devriez poster une image qui montre à quoi ressemble la grille et ajouter dans votre question le code complet de votre grille, y compris le code HTML, des informations sur la version de jqGrid que vous utilisez et le test Les données. Donc tout ce dont on a besoin pour reproduire votre problème.

Answer 3

Le code ci-dessus ne fonctionnait pas pour moi

je l'ai changé un peu: fonctionne bien 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); 
}