javascript jqGrid 列未与列标题对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4090255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqGrid column not aligned with column headers
提问by Sumit
This question was asked here. jqGrid column not aligned with column headers
这个问题是在这里问的。 jqGrid 列未与列标题对齐
But the border-right-color style doesnt seem to work for me.
但是边框右颜色样式似乎对我不起作用。
I am using jqGrid 3.8 and IE 8
我正在使用 jqGrid 3.8 和 IE 8
This is my setup for jqGrid
这是我对 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'}
],
Any thoughts?
有什么想法吗？
采纳答案by Mukthesh
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].
我遇到了同样的问题，我通过在 中附加 4 行代码解决了这个问题gridComplete，这 4 行将更改td内容区域td的样式[第一行的样式修改就足够了]。
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.
这是 jqgid 中的一个问题，它实际上是将td's设置在's 内部，<thead>但这种样式并未反映在td's of 内容区域中。在开发 jqgrid 时，他们假设整个列的宽度会受到改变一行tds 的宽度的影响，但他们只是改变了，<thead>这是这里持续存在的问题。
Set column widths in the colModel:
在 中设置列宽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);
}
}]
}
}
]
add the below code in the gridCompleteevent:
在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"));
}
}
}
I hope the above code will help you in solving the issue.
我希望上面的代码可以帮助您解决问题。
回答by Zecarro
The code above wasn't working for me
上面的代码对我不起作用
I changed it a little: Working fine with 4.6.0
我稍微改变了一下：在 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);
}
回答by Jerry
I know its very Old , but I have faced the same issue today (4.5.1 version) while working on a legacy application and the @Zecarro's solution helped me. I had to modify the script to set the column width instead of Header width to make it working though.
我知道它很旧，但我今天在处理遗留应用程序时遇到了同样的问题（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);
}
回答by Oleg
Look at my old answerwhich describes how to change the column header alignment.
看看我的旧答案，它描述了如何更改列标题对齐方式。
It it is not what you want, then you should post a picture which shows how grid look like and add in your question the full code of you grid including HTML code, information about version of jqGrid which you use and the test data. So all what one need to reproduce your problem.
这不是您想要的，那么您应该发布一张显示网格外观的图片，并在您的问题中添加您的网格的完整代码，包括 HTML 代码、有关您使用的 jqGrid 版本的信息和测试数据。因此，重现您的问题所需的一切。
