Jqgrid根据其内容可编辑列宽答案

【问题标题】：Jqgrid Editable Column width According to Its ContentJqgrid根据其内容可编辑列宽
【发布时间】：2015-01-01 06:52:15
【问题描述】：

我已将 Oleg 提供的代码包含在此 link 中。它可以完美地根据其内容设置列的大小。我现在面临的唯一问题是，当我为列值设置“editble：true”时，跨度也与元素一起显示。这个跨度被添加到单个单元格中以获取文本的宽度出现在单元格中。现在编辑列显示的列值是：

<span class="mywrapping">text</span>

请帮忙。

【问题讨论】：

标签： jquery html css jqgrid width

【解决方案1】：

你是对的。现在在我看来，将<span> 包含在临时包装以测量单元格的宽度会更有效。在这种情况下，包裹跨度不会留在单元格中，并且您描述的问题似乎不会更多。

The demo 提供网格中实现“自动宽度”行为的修改版本。它使用以下代码

var autosizeColumn = function (iCol) {
        var $this = $(this), iRow, rows, row, colWidth,
            cm = typeof iCol === "string" ? $this.jqGrid("getColProp", iCol) : $this.jqGrid("getGridParam", "colModel")[iCol],
            getOuterWidth = function ($elem) {
                var $wrappingSpan, width;

                $elem.wrapInner("<span class='mywrapping'></span>");
                $wrappingSpan = $elem.find(">.mywrapping");
                width = $wrappingSpan.outerWidth();
                $elem.html($wrappingSpan.html());

                return width;
            };

        if (cm == null || cm.hidden) {
            return; // don't change the width of hidden columns
        }
        colWidth = getOuterWidth($(this.grid.headers[iCol].el).find(">div")) + 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, getOuterWidth($(row.cells[iCol])));
            }
        }
        $this.jqGrid("setColWidth", iCol, colWidth);
    },
    autosizeColumns = function () {
        var $this = $(this), iCol,
            colModel = $this.jqGrid("getGridParam", "colModel"),
            n = $.isArray(colModel) ? colModel.length : 0;

        for (iCol = 0; iCol < n; iCol++) {
            autosizeColumn.call(this, iCol);
        }
    };

$grid.bind("jqGridAfterLoadComplete jqGridRemapColumns jqGridInlineAfterSaveRow", autosizeColumns);

更新。或者，可以使用我发布为jQuery.jqGrid.addColumn.jshere 的autoWidthColumns 插件。在这种情况下，只需同时包含jQuery.jqGrid.setColWidth.js 和jQuery.jqGrid.autoWidthColumns.js 并使用$("#gridid").jqGrid("autoWidthColumns").jqGrid({/*option*/}); 而不是标准的$("#gridid").jqGrid({/*option*/}); 创建网格。

The demo 使用 autoWidthColumns 插件。

【讨论】：