jqGrid sütunu, sütun başlıkları ile hizalanmamış

Question

Bu soru burada soruldu. jqGrid column not aligned with column headers

Ancak kenarlık-sağ renk stili benim için çalışmıyor gibi görünüyor.

Ben JqGrid 3.8 ve IE 8

kullanıyorum Bu 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'} 
], 

Herhangi düşünceler benim kurulum nedir?

Answer 1

ben gridComplete kod 4 satır ekleyerek bu sorunu çözülmüş, bu 4 hat td tarzını değiştirecek 'içerik alanının s [ilk sıradaki td sitesindeki stil değişikliği yeterlidir].

Bu

aslında td kuruyor jqgid bir sorun olduğunu ' <thead> içindeki s ancak bu tarz td yılında yansıtmıyor' içerik alanının s. Jqgrid'i geliştirirken, bir satırın td s genişliklerini değiştirerek tüm sütun genişliğinin etkileneceğini varsaydılar, ancak yalnızca <thead> için değiştiler, ki buradaki sorun devam ediyor. colModel yılında

Seti sütun genişlikleri:

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 olay aşağıdaki kodu ekleyin:

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")); 
     } 
    } 
} 

Yukarıdaki kod sorunu çözmede size yardımcı olacağını umuyoruz. Ben bunu biraz değişti

Answer 2

Sütun başlığı hizalamasını nasıl değiştireceğimi açıklayan old answer numaralı bağlantıya bakın.

İstediğiniz şey bu değil, o zaman kılavuzun nasıl göründüğünü gösteren bir resim göndermelisiniz ve HTML kodu, kullandığınız jqGrid sürümüyle ilgili bilgiler de dahil olmak üzere kılavuzunuzun tam kodunu ekleyin. veri. Yani sorununuzu yeniden üretmek için gereken her şey. Aynı sorun sahip olan

Answer 3

Yukarıdaki kod benim için çalışma değildi: Ben kod biçimlendirme için özür 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); 
}