了解JQGrid列宽行为
我有一个有很多列的树网格，都有指定的宽度。 而且男孩看起来很糟糕，因为标题与下面的列不同步，即使我有短数据。
具体来说，如果列标题标题短于此列宽，则标题会缩小到标题中文本的大小。
如何使标题与列的大小完全相同？
问题2：我注意到虽然文档说“width”选项以像素为单位，但我可以看到它实际上不是以像素为单位，而是相对于网格中其他宽度的数字。 例如，如果所有字段的大小均为10，则它们的大小将相等，但宽度不是10像素。
提前感谢澄清，因为这个简单的问题似乎比我想象的更深层次。
尝试使用’autowidth’和’shrinkToFit’jqGrid参数。 例如，如果’shrinkToFit’为true，则列的宽度将更改，就像初始宽度定义百分比一样。 在这里阅读更多。
我遇到过同样的问题。 结果是表格单元格上填充的现有的站点默认css定义。 确保您的th和td标记之间的填充是一致的。 我在网格上放了一个带div类的div，并将以下内容添加到我的CSS中：
.grid td, .grid th { padding: 1pt 1ex !important; } 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")); } } }
我遇到了同样的问题。 我通过在GridComplete中附加4行代码解决了这个问题。 这4行将改变内容区域的td样式[第一行td的样式修改就足够了]。 这是jqgid中的一个问题。 这实际上是在”中设置td，但这种风格并没有反映在内容区域的td中。 在开发jqgrid时，他们假设整个列的宽度将通过改变一行tds的宽度来实现，但它们只会改变为”，这是持续存在的问题。
在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")); } } }
我希望上面的代码可以帮助您解决问题。
通过CSS设置每列宽度的百分比
添加css类如下
table.ui-jqgrid-htable thead{display:table-header-group} #JQGridClientMaster td, #ui-jqgrid-htable th{display:table-cell}
现在将宽度设置为和的每列
#JQGridClientMaster td:nth-child(1),th#JQGridClientMaster_rn{width:2% !important;}