Jqgrid根据其内容可编辑列宽 [英] Jqgrid Editable Column width According to Its Content

问题描述

我在此链接中包含了Oleg提供的代码它完美地工作，根据其内容设置列的大小。我现在面临的唯一问题是，当我为列值设置editble：true时，跨度也随着元素一起显示。该跨度被添加到单个单元格以获取文本的宽度现在编辑该列，显示的列值为：

I have included the code provided by Oleg in this link.It works perfectly to set the size of the column depending on its content. The only problem I am facing right now is this that when I set "editble: true" for a column value, the span is also getting displayed along with the element.This span was added to the individual cells to acquire the width of the text present in the cells.now to edit the coloumn the column value that is displayed is:

< span class =mywrapping>文字< / span>

请帮助。 $ b

推荐答案

你说得对。现在我觉得我会更有效的包括< span> 只是临时的，以测量单元格的宽度。在这种情况下，包装跨度不会留在细胞中，你描述的任何问题都不会出现。

You are right. It seems to me now that i would be more effective to include wrapping <span> only temporary to measure the width of the cell. In the case the wrapping span will not stay in cells and no problems which you described will be ever seem more.

演示提供了网格中实现自动宽度行为的修改版本。它使用以下代码

The demo provides modified version of the implementation "autowidth" behavior in the grid. It uses the following code

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);

UPDATED 。或者，可以使用 autoWidthColumns 插件，我发布为 jQuery.jqGrid.addColumn.js 此处。在这种情况下，只需要包括 jQuery.jqGrid.setColWidth.js 和 jQuery.jqGrid.autoWidthColumns.js 并使用 $（＃gridid）。jqGrid（autoWidthColumns）。jqGrid（{/ * option * /}）; code> $（＃gridid）。jqGrid（{/ * option * /}）; 。

UPDATED. Alternatively one can use autoWidthColumns plugin which I posted as jQuery.jqGrid.addColumn.js here. In the case one needs just to include both jQuery.jqGrid.setColWidth.js and jQuery.jqGrid.autoWidthColumns.js and to create the grid using $("#gridid").jqGrid("autoWidthColumns").jqGrid({/*option*/}); instead of the standard $("#gridid").jqGrid({/*option*/});.

演示使用 autoWidthColumns 插件。

这篇关于Jqgrid根据其内容可编辑列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！