jquery - 加载数据后如何调整jqgrid的列宽？

Question

我的最终目标是让jqgrid根据数据内容自动设置列宽。作为到达那里的路径的一部分，我需要能够在加载数据后设置列宽，届时我会知道每列的最大宽度。但是一旦我知道一列的最大宽度，我如何在“loadComplete”事件中设置每列的宽度并让网格刷新为每列的新宽度？我在网上找到的大多数帖子都是关于网格的整体宽度的。我想要的是设置每个单独列的宽度，并在总宽度太长时自动显示水平滚动条。

更新:在看到 Oleg 的精彩演示后，我最终在 dqGrid (4.5.4) 本身中编写了代码。这是我所做的:

定位函数

addJSONData = function(data,t, rcnt, more, adjust) {

然后在这个函数中定位

            for (j=0;j<rowReader.length;j++) {
                v = $.jgrid.getAccessor(cur,rowReader[j]);
                rd[ts.p.colModel[j+gi+si+ni].name] = v;
                rowData.push(addCell(idr, v, j + gi + si + ni, i + rcnt, cur, rd));

                // my addtion: stores the largest header size
                var newWidth = v.length * 6; 
                if (ts.grid.headers[j].width < newWidth) {
                    ts.grid.headers[j].width = newWidth;
                }
            }

然后在这个函数的结束}之前，添加以下内容

        // my addition: invoke the resizing logic
        for (j = 0; j < rowReader.length; j++) {
            ts.grid.resizing = { idx: j };
            ts.grid.dragEnd();
        }

之后网格会根据内容调整每一列的宽度。我仍然需要帮助的一件事是如何精确计算新宽度。我当前的硬编码计算

var newWidth = v.length * 6;

显然可扩展性不是很好。

Answer 1

关于您的问题的简短回答可能是:jqGrid 不提供允许在创建网格后更改列宽的方法。在这种情况下，我提醒 Kozma Prutkov 的著名格言:“谁阻止你发明防水火药？”。这意味着以下几点:如果某些东西不存在，它仍然可以被发明。所以我根据 the answer 中建议的解决方案编写了这样的方法，我建议调用内部方法 dragEnd 来调整网格列的大小。

The demo 演示新方法的用法。该演示允许选择网格的某些列，然后将宽度更改为您指定的新值:

下面是新方法的代码

$.jgrid.extend({
    setColWidth: function (iCol, newWidth, adjustGridWidth) {
        return this.each(function () {
            var $self = $(this), grid = this.grid, p = this.p, colName, colModel = p.colModel, i, nCol;
            if (typeof iCol === "string") {
                // the first parametrer is column name instead of index
                colName = iCol;
                for (i = 0, nCol = colModel.length; i < nCol; i++) {
                    if (colModel[i].name === colName) {
                        iCol = i;
                        break;
                    }
                }
                if (i >= nCol) {
                    return; // error: non-existing column name specified as the first parameter
                }
            } else if (typeof iCol !== "number") {
                return; // error: wrong parameters
            }
            grid.resizing = { idx: iCol };
            grid.headers[iCol].newWidth = newWidth;
            grid.newWidth = p.tblwidth + newWidth - grid.headers[iCol].width;
            grid.dragEnd();   // adjust column width
            if (adjustGridWidth !== false) {
                $self.jqGrid("setGridWidth", grid.newWidth, false); // adjust grid width too
            }
        });
    }
});

您可以在项目中包含该方法，然后使用setColWidth 方法。该方法的第一个参数是列索引或列名。第二个参数是一个数字，指定列宽度的新值。第三个参数是可选的。如果未指定，则网格的宽度将根据列宽的变化自动调整。因此，如果在更改列宽之前没有滚动条，则网格将没有滚动条。如果你想保持原来的网格宽度，你应该指定 false 作为 setColWidth 方法的第三个参数。

更新 最新(更新)版本的 setColWidth 可以从 github 下载。当前正在开发的新免费 jqGrid 版本here 包括jqGrid 基础模块中的方法。所以如果你从这里使用 jquery.jqGrid.min.js, jquery.jqGrid.min.map 和 jquery.jqGrid.src.js那么你不需要将带有 setColWidth 的 jQuery.jqGrid.autoWidthColumns.js 作为插件包含在内。

更新 2: 我修改了上面的代码以对应我发布到 github 的最新版本的 setColWidth。

更新 3:方法 setColWidth 包含在我从 2014 年底开始开发的 jqGrid 的 free jqGrid 分支中。它包括许多其他新功能，例如扩展宽度列基于列内容的宽度。有关详细信息，请参阅 the wiki article。