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列与列标题不对齐

回答

相关问题