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

我的最终目标是让jqgrid根据数据内容自动设置列宽。 作为去那里path的一部分,我需要能够设置列的宽度后,数据加载到哪个时间,我会知道每列的最大宽度。 但是,一旦我知道列的最大宽度,如何设置“loadComplete”事件中每列的宽度,并使用每列的新宽度进行网格刷新? 我在网上发现的大部分post都是关于网格的整体宽度的。 我想要的是设置每个单独的列的宽度,并让水平滚动条自动出现,如果总宽度太长。

更新 :看到奥列格的真棒演示后,我最终编码在dqGrid(4.5.4)本身。 以下是我所做的:

findfunction

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

然后find这个function

  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;

显然不是很可扩展的。

对你的问题简短的回答可能是:jqGrid没有提供方法,允许在网格创build后更改列宽。 在这种情况下,我提醒人们众所周知的科兹马普鲁特科夫格言:“谁阻止你发明火药防水?” 它意味着如下:如果不存在,它仍然可以发明。 所以我写了这样的方法,根据答案中提出的解决scheme,我build议调用内部方法dragEnd来调整网格的列的大小。

演示演示了新方法的用法。 演示允许select网格的某一列,然后将宽度更改为您指定的新值:

在这里输入图像描述

你可以在下面find新方法的代码

 $.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.jsjquery.jqGrid.min.mapjquery.jqGrid.src.js ,那么你不需要包含jQuery.jqGrid.autoWidthColumns.js和setColWidth作为插件。

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

更新3: setColWidth方法包含在jqGrid的免费jqGrid分支中,这是我自2014年底以来开发的。它包含许多其他新function,例如根据列内容的宽度来扩展列的宽度。 有关更多详细信息,请参阅wiki文章 。