jqGrid列未与列标题对齐 [英] jqGrid column not aligned with column headers

问题描述

在这里问了这个问题. jqGrid列与列标题不对齐

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

但是边框右颜色样式似乎对我不起作用.

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.

这篇关于jqGrid列未与列标题对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！