Javascript 了解 JQGrid 列宽行为
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2157011/
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
Understanding JQGrid column width behaviors
提问by AlexA
I have a tree grid with many columns, all with specified width. And boy, it looks terrible since headers are out of sync with columns below, even if I have short data in them.
我有一个包含许多列的树形网格，所有列都具有指定的宽度。男孩，它看起来很糟糕，因为标题与下面的列不同步，即使我有短数据。
Specifically, if the column heading title is shorterthan this column width, the header shrinks down to the the size of the text in the header.
具体来说，如果列标题标题短于此列宽度，则标题会缩小到标题中文本的大小。
How can I make the header be exactly the same size as the column?
如何使标题与列的大小完全相同？
Question 2: I've noticed that although the documentation says that the columns "width" option is in pixels, I can see that it's actually not in pixels, but just a number relative to other widths in grid. E.g. if all fields are size 10, they all will be equal in size, but not 10 pixels in width.
问题 2：我注意到，虽然文档说列“宽度”选项以像素为单位，但我可以看到它实际上不是以像素为单位，而只是相对于网格中其他宽度的一个数字。例如，如果所有字段的大小均为 10，则它们的大小都相同，但宽度不是 10 像素。
Thanks in advance for clarifications, as this simple issue seems to have deeper roots than I thought.
在此先感谢您的澄清，因为这个简单的问题似乎比我想象的更深。
回答by queen3
回答by John Weber
I had the same issue. It turned out to be the existing, site default, css definitions for padding on table cells. Make sure your padding is consistent between your th and td tags. I put a div around the grid with a class of div, and added the following to my CSS:
我遇到过同样的问题。事实证明，它是现有的、站点默认的、用于表格单元格填充的 css 定义。确保你的 th 和 td 标签之间的填充是一致的。我在网格周围放置了一个 div 类，并在我的 CSS 中添加了以下内容：
.grid td, .grid th {
padding: 1pt 1ex !important;
}
回答by Mukthesh
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: 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"));
}
}
}
回答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]. This is an issue in jqgid. Which is actually setting the td's inside the '' but this style is not reflected 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 '' which is the persisting issue here.
我遇到了同样的问题。我通过在 GridComplete 中附加 4 行代码解决了这个问题。这4行会改变内容区域td的样式【第一行td的样式修改就够了】。这是 jqgid 中的一个问题。这实际上是在 '' 内设置 td，但这种风格并未反映在内容区域的 td 中。在开发 jqgrid 时，他们假设整个列的宽度将受到更改一行 tds 的宽度的影响，但他们只更改了 ''，这是这里持续存在的问题。
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 gridComplete event:
在 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 abc
<div id="pager"></div>
<span id='ruler' class='ui-th-column' style='visibility:hidden;font-weight:bold'></span>
<script type="text/javascript">
var colNamesData = ['Inv No','Date Of the Transaction', 'Amount That Is Owed'];
var colModelData = [
{name:'invid', index:'invid', width:55},
{name:'invdate', index:'invdate', resizeToTitleWidth:true},
{name:'amount', index:'amount', align:'right', resizeToTitleWidth:true}];
jQuery(document).ready(function() {
var ruler = document.getElementById('ruler');
for (var i in colNamesData) {
if (colModelData[i].resizeToTitleWidth != true) {
continue;
}
// Measure the title using the ruler span
ruler.innerHTML = colNamesData[i];
// The +26 allows for padding and to fit the sorting UI
var newWidth = ruler.offsetWidth + 26;
if (newWidth < 100) {
// Nothing smaller than 100 pixels
newWidth = 100;
}
colModelData[i].width = newWidth;
}
jQuery("#list").jqGrid({
...
colNames: colNamesData,
colModel: colModelData,
shrinkToFit:false,
...
});
</script>
回答by Dhanraj Manure
Set the Each Column width in percentage by CSS
通过 CSS 设置每列宽度的百分比
Add the css classes as below
添加css类如下
table.ui-jqgrid-htable thead{display:table-header-group}
#JQGridClientMaster td, #ui-jqgrid-htable th{display:table-cell}
Now Set the width to each column of and
现在将宽度设置为和
#JQGridClientMaster td:nth-child(1),th#JQGridClientMaster_rn{width:2% !important;}
