我正在根据这篇文章中建议的内容使用调整 Jqgrid 列宽度，
Jqgrid Column width According to Its Content
在 jqgrid 的 loadcomplete 事件之后这种方式。
loadComplete : function () {
$("#list").bind("jqGridAfterLoadComplete", function () {
var $this = $(this), iCol, iRow, rows, row, cm, colWidth,
$cells = $this.find(">tbody>tr>td"),
$colHeaders = $(this.grid.hDiv).find(">.ui-jqgrid-hbox>.ui-jqgrid-htable>thead>.ui-jqgrid-labels>.ui-th-column>div"),
colModel = $this.jqGrid("getGridParam", "colModel"),
n = $.isArray(colModel) ? colModel.length : 0,
idColHeadPrexif = "jqgh_" + this.id + "_";
$cells.wrapInner("<span class='mywrapping'></span>");
$colHeaders.wrapInner("<span class='mywrapping'></span>");
for (iCol = 0; iCol < n; iCol++) {
cm = colModel[iCol];
colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth() + 25; // 25px for sorting icons
for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) {
row = rows[iRow];
if ($(row).hasClass("jqgrow")) {
colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth());
}
}
$this.jqGrid("setColWidth", iCol, colWidth);
}
});
}
问题是我在这一行的列宽为零
colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth()+25;
我的列标题将以这种方式具有特殊字符，尽管我已设置自动编码:true。我得到列宽 = 0。我需要解析这些列吗？
list_Code [HEAVY] [DUTY] [50]
以同样的方式，我在该行的行外部宽度为零，
colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth());
结果，我的行的所有时间宽度都是 25。
为什么在这些情况下我无法为库姆和行获取 outerwidth()？
有人能帮忙吗？
但是，如果我打印 .html()，我将以这种方式正确获取 DIv 内容，
var spans = $( "span" );
$(row.cells[iCol]).find(spans).html();
HTML DIV 跟踪:
TH
<th id="list_Code [HEAVY] [DUTY] [50]" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 65px;">
<span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;"> </span>
<div id="jqgh_list_Code [HEAVY] [DUTY] [50]" class="ui-jqgrid-sortable">
<span class="mywrapping">Code [HEAVY] [DUTY] [50]<span class="s-ico" style="display:none">
<span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr">
</span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></span></div></th>
TD
<td role="gridcell" style="text-align:left;" title="FE" aria-describedby="list_Code [HEAVY] [DUTY] [50]"><span class="mywrapping"><div style="max-height: 100px">FEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFE</div></span></td>
唯一的问题是宽度的..
列模型格式器:
formatter : function(v){ return '<div style="max-height: 100px">' + v + '</div>'; },
我所有的列名都有特殊字符，是这个原因吗？如果是这样，为什么行/单元格宽度也被检索为零。
我尝试了 width/inner/outer 都没有用。
任何人都可以阐明这一点吗？
最佳答案
看来你用的是name: "Code [HEAVY] [DUTY] [50]"并在 colNames 中使用相同的文本或者你使用 lable: "Code [HEAVY] [DUTY] [50]" . 您没有发布您使用的 JavaScript 代码，所以我不得不猜测。此外，不清楚您在页面上使用哪种 HTML 方言(您在页面上使用哪种 <!DOCTYPE html ...>)。了解 jqGrid 使用 name 很重要colModel的属性(property)构建网格的一些内部 HTML 结构的 id 元素。您已在发布的 HTML 片段中看到它。 HTML5 不允许在 id 中使用空格(参见 here 例如)。你可以隐藏 HTML4 对 ids 的限制 here .此外符号 [和 ]至少在使用非常旧的 jqGrid 4.4.1 的情况下也是错误的。所以值 name: "Code [HEAVY] [DUTY] [50]"遵循动态创建错误的 HTML 代码。您应该修复为用户显示的包含相同文本的值(由 colNames 或 label 的 colModel 属性指定)。例如你可以使用
name: "Code_HEAVY_DUTY_50",
label: "Code [HEAVY] [DUTY] [50]"
关于javascript - 为什么 outerWidth 不适用于 jqgrid 行和列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31793646/