HTML DIV跟踪：

Question

我正在使用调整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;

我的列标题会有这样的特殊字符，虽然我设置了autoencode：true。我得到列宽= 0.我需要解析这些列吗？

list_Code [HEAVY] [DUTY] [50]

同样地，我在这一行的行outerewidth得到零，

colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth());

因此，我的行的所有时间宽度都是25。

为什么我无法在这些情况下为coulms和行获取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;">&nbsp;</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>

唯一的问题是宽度为..

柱模型Fomatter：

formatter : function(v){ return '<div style="max-height: 100px">' + v + '</div>'; },

我的所有列名都有特殊字符。这就是原因吗？如果是这样，为什么行/单元格宽度也被重新调整为零。

我试过宽度/内/外无效。

任何人都可以对此有所了解吗？

Answer 1

您似乎使用name: "Code [HEAVY] [DUTY] [50]"并使用colNames中的相同文字或使用lable: "Code [HEAVY] [DUTY] [50]"。 您没有发布您使用的JavaScript代码，所以我不得不猜测。此外，还不清楚您在页面上使用哪种HTML方言（您在页面上使用<!DOCTYPE html ...>）。重要的是要了解jqGrid使用name的{{1}}属性来构建网格的某些内部HTML结构的id元素。您已在发布的HTML片段中看到过它。 HTML5不允许在colModel内使用空格（例如，请参阅here）。您可以为ids here隐藏HTML4的限制。此外，至少在使用非常旧的jqGrid 4.4.1的情况下，符号id和[也是错误的。因此值]跟随动态创建错误的HTML代码。您应该修复包含为用户显示的相同文本的值（由name: "Code [HEAVY] [DUTY] [50]"或colNames的{{1}}属性指定）。例如，您可以使用

label

为什么outerWidth不能与jqgrid行和列一起使用？

HTML DIV跟踪：

TH

TD

柱模型Fomatter：

1 个答案: