columna jqGrid no alineado con los encabezados de las columnas

Question

Esta pregunta se realizó aquí. jqGrid column not aligned with column headers

Pero el estilo de color de borde derecho no parece funcionar para mí.

estoy usando jqGrid 3.8 e IE 8

Esta es mi configuración de 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'} 
], 

¿Alguna idea?

Answer 1

que estaba teniendo el mismo problema, he resuelto este problema añadiendo 4 líneas de código en gridComplete, estas 4 líneas cambiar el estilo de td 's de área de contenido [primera fila td' modificación estilo s es suficiente].

Este es un problema en jqgid, que en realidad está configurando el td dentro del <thead> pero este estilo no se refleja en el área de contenido de td. Durante el desarrollo de jqgrid supusieron que el ancho total de las columnas se vería afectado al cambiar el ancho de una fila de td s, pero solo cambiaron por <thead>, que es el problema persistente aquí.

ancho de las columnas en el conjunto de 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); 
       } 
      }] 
     } 
    } 
] 

añadir el código de abajo en caso 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")); 
     } 
    } 
} 

espero que el código anterior le ayudará en la solución del problema.

Answer 2

Mire mi old answer que describe cómo cambiar la alineación del encabezado de columna.

No es lo que quieres, entonces deberías publicar una imagen que muestre cómo se ve la grilla y agregar en tu pregunta el código completo de tu grilla incluyendo código HTML, información sobre la versión de jqGrid que usas y la prueba datos. Entonces, todo lo que necesita para reproducir su problema.

Answer 3

El código anterior no funcionaba para mí

he cambiado un poco: Trabajar bien con 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); 
}