如何调整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;

显然不是很可扩展的。

Answer 1

对你的问题简短的回答可能是：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.js ， jquery.jqGrid.min.map和jquery.jqGrid.src.js ，那么你不需要包含jQuery.jqGrid.autoWidthColumns.js和setColWidth作为插件。

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

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