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演示了新方法的用法。该演示允许选择网格的某些列，然后将宽度更改为您指定的新值：

enter image description here

您可以在下面找到新方法的代码

$.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下载。正在开发的{qqGrid的新 free 版本here包括jqGrid的基础模块中的方法。因此，如果您从此处使用jquery.jqGrid.min.js，jquery.jqGrid.min.map和jquery.jqGrid.src.js，那么您不需要将jQuery.jqGrid.autoWidthColumns.js包含setColWidth作为插件。

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

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

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

1 个答案: