【发布时间】：2015-08-03 17:52:02
【问题描述】：
我正在根据这篇文章中建议的内容使用调整 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。
为什么在这些情况下我无法为 coulms 和 rows 获取 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>'; },
我所有的列名都有特殊字符。这就是原因吗？如果是这样，为什么行/单元格宽度也被检索为零。
我试过宽度/内部/外部没有任何效果。
任何人都可以对此有所了解吗？
【问题讨论】：
-
首先，我最初建议的旧方式 (
$cells.wrapInner("<span class='mywrapping'></span>"); ...) 是 slow 因为它修改了文本。我建议您使用免费的 jqGrid 4.9.1 或来自GitHub 的最新代码。只有当你不能迁移到免费的 jqGrid 时，你才应该在调试上投入更多。 您能否发布重现问题的演示？您使用什么列名（不是列标题）？如果您使用name: "Code [HEAVY] [DUTY] [50]"，那么您会出错。您使用哪个 HTML 版本？ HTML5 或 ??? -
@Oleg 我使用 jquery 1.8 和 jqgrid 4.4.1，我无法迁移，因为它完全是遗留代码......还有其他更好的方法吗？
-
抱歉，在您回答时我问了您更多问题。您在网格中使用了哪些
name属性？colModel中有name: "Code [HEAVY] [DUTY] [50]"吗？您使用哪个 HTML 版本？ （<!DOCTYPE html...>的第一行看起来如何？）。例如，HTML5 不允许在 id 中使用空格，colModel的name属性将用于构建 id（就像您自己看到的那样）。所以你必须更改列的名称，但仍然可以使用旧的colNames，它将显示给用户。
标签： javascript jquery html css jqgrid