jqGrid列與列標題不對齊

在此處詢問此問題。 jqGrid column not aligned with column headers jqGrid列與列標題不對齊

但是邊界 - 右邊顏色風格似乎不適合我。

我使用的jqGrid 3.8和IE 8

這是我的設置爲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'} 
],

有什麼想法？

來源

2010-11-03 Sumit

我的代碼的格式道歉... – Sumit 2010-11-03 18:19:13

，我通過在gridComplete追加4行代碼解決了這個問題，這4個行會改變的td風格'內容區域的S [第一行td的風格修改是足夠。

這是jqgid中的一個問題，它實際上將td設置在<thead>之內，但是這種樣式並不反映在td的內容區域中。在開發jqgrid的時候，他們認爲整個列的寬度將通過改變一行的寬度td s來實現，但它們只是在<thead>這一點上發生了變化，這是這裏持續存在的問題。

在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); 
       } 
      }] 
     } 
    } 
]

添加下面的代碼在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")); 
     } 
    } 
}

我希望上面的代碼將幫助您解決問題。

來源

2011-03-22 06:32:45 Mukthesh

謝謝，這個問題一直在殺我一會兒。驚訝這個問題是2歲以上... – 2013-07-19 13:43:27

謝謝你@ Muktesh.I是突破頭解決這個問題。偉大的解決方案。 – 2017-02-09 10:32:55

看看我的old answer，它描述瞭如何更改列標題對齊。

它不是你想要的，那麼你應該發佈一張圖片，顯示網格的樣子，並在你的問題中添加你的網格的完整代碼，包括HTML代碼，關於你使用的jqGrid版本的信息和測試數據。因此，所有人都需要重現您的問題。我也有同樣的問題

來源

2010-11-03 18:20:58 Oleg

上面的代碼是不是爲我工作

我改變了一點：做工精細用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); 
}

來源

2014-03-12 22:09:05 Zecarro

jqGrid列與列標題不對齊

回答

相關問題