jqGrid 列未与列标题对齐

2022-01-19 00:00:00 javascript jqgrid

这个问题是在这里提出的.jqGrid 列未与列标题对齐

This question was asked here. jqGrid column not aligned with column headers

但是border-right-color 样式似乎不适合我.

But the border-right-color style doesnt seem to work for me.

我正在使用 jqGrid 3.8 和 IE 8

I am using jqGrid 3.8 and IE 8

这是我对 jqGrid 的设置

This is my setup for 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'}
],

有什么想法吗?

推荐答案

我遇到了同样的问题，我通过在 gridComplete 中附加 4 行代码解决了这个问题，这 4 行将改变内容区td的样式[第一行td的样式修改就够了].

I was having the same issue, I solved this issue by appending 4 lines of code in gridComplete, these 4 lines will change the style of td's of content area [first row td's style modification is enough].

这是 jqgid 中的一个问题，它实际上是在 <thead> 内设置 td，但这种风格并没有反映在 td 的内容区域.在开发 jqgrid 时，他们假设整个列的宽度会受到改变一行的 td 宽度的影响，但他们只改变了 <thead> ，这是这里一直存在的问题.

This is an issue in jqgid, which is actually setting the td's inside the <thead> but this style is not reflecting in the td's of content area. While developing jqgrid they assumed that entire columns width will be effected by changing widths of one row's tds but they only changed for <thead> which is the persisting issue here.

在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 事件中添加以下代码:

add the below code in the gridComplete event:

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

希望以上代码能帮助您解决问题.

I hope the above code will help you in solving the issue.

相关文章