jqGrid 列未与列标题对齐

Question

这个问题是在这里提出的。 jqGrid column not aligned with column headers

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

我正在使用 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'}
],

有什么想法吗？

Answer 1

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

这是 jqgid 中的一个问题，它实际上是在 <thead> 内设置了 td，但这种风格并没有反映在 td 的内容区域中。在开发 jqgrid 时，他们假设整个列的宽度会受到更改一行的 tds 宽度的影响，但他们只更改了 <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")); 
        } 
    } 
}

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

Answer 2

看看我的old answer，它描述了如何更改列标题对齐方式。

这不是您想要的，那么您应该发布一张图片，显示网格的外观，并在您的问题中添加网格的完整代码，包括 HTML 代码、有关您使用的 jqGrid 版本的信息和测试数据.因此，重现您的问题所需要的一切。

Answer 3

上面的代码对我不起作用

我稍微改了一下： 使用 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);
}

Answer 4

我知道它已经很老了，但我今天在处理遗留应用程序时遇到了同样的问题（4.5.1 版本），@Zecarro 的解决方案帮助了我。不过，我必须修改脚本以设置列宽而不是标题宽度才能使其正常工作。

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();

    var headerWidth = $(objHeader[i]).width();
    col.width(headerWidth);
}

Answer 5

就我而言，

1. jqgrid 4.4.4 版
2. 有组标题
3. 列模型中所有列的长度相等=> width:100
4. 在 GridComplete 事件中我调用了以下函数

function alignColumnsWithHeaders(gridName) {

    //alert("giriyor");
    var objTableDiv = $("div[id=gview_" + gridName + "]");
    var tableLength = objTableDiv.width();
    var objHeader = $("table[aria-labelledby=gbox_" + gridName + "] tr[class=jqg-   first-row-header] th");
    var columnLength = tableLength / objHeader.length;
    columnLength = Math.floor(columnLength);        
    for (var i = 0; i < objHeader.length; i++) {
        objHeader[i].style.width = columnLength.toString() + "px";
    }
}

5. 对于一般情况，我检查了 jqgrid 生成的 html，我意识到： 5.1 在标题部分下，有三行 5.1.1 第 1 行包含以像素为单位的原始列标题宽度，这些值用于表标题宽度 5.1.2 第 2 行包含（在我的情况下）一些跨越 2 行的列标题和跨越多个列的组标题。 5.1.3 第 3 行包含组标题的行标题 5.2 第 2 行和第 3 行元素的标题宽度用于表格的列宽。
6. 我懒得写通用案例代码