如何在加载数据后调整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众所周知的格言:"谁阻止你发明火药防水？".它意味着以下内容:如果某些东西不存在,它仍然可以被发明.所以我根据答案中建议的解决方案编写了这样的方法,我建议调用内部方法dragEnd来调整网格列的大小.

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

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

$.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的版本,目前正在开发这里包含的方法jqGrid的基础模块中.所以,如果你使用jquery.jqGrid.min.js,jquery.jqGrid.min.map并jquery.jqGrid.src.js从这里开始,那么你就不需要包括jQuery.jqGrid.autoWidthColumns.js与setColWidth作为插件.

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

UPDATEd 3:该方法setColWidth包含在jqGrid的自由jqGrid fork中,这是我自2014年底开发的.它包含许多其他新功能,例如根据列内容的宽度扩展列的宽度.有关更多详细信息,请参阅Wiki文章.