Jqgrid柱宽根据其内容

我的Jqgrid.All列中有很多列,显示两侧的额外空间。我希望该列没有额外的间距。 列宽应根据其内容具有宽度。 我尝试过autowidth但它不起作用。

实际行为如下所示:

----------------------------------------------- | Name | Mobile | Email | ----------------------------------------------- 

而我需要的是:

 ---------------------- |Name|Mobile No|Email| ---------------------- 

这是我的代码

  $("#list").jqGrid({ datatype: "local", data: mydata, colNames: ["Name", "Mobile", "Email", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"], colModel: [ { name: "id", width: 65, align: "center", sorttype: "int", hidden: true }, { name: "invdate", width: 80, align: "center", sorttype: "date", formatter: "date", formatoptions: { newformat: "dMY" }, datefmt: "dMY" }, { name: "name", width: 70 }, { name: "amount", width: 75, formatter: "number", sorttype: "number", align: "right" }, { name: "tax", width: 55, formatter: "number", sorttype: "number", align: "right", hidden: true }, { name: "total", width: 65, formatter: "number", sorttype: "number", align: "right" }, { name: "closed", width: 75, align: "center", formatter: "checkbox", edittype: "checkbox", editoptions: { value: "Yes:No", defaultValue: "Yes" } }, { name: "ship_via", width: 100, align: "center", formatter: "select", edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "Intime" } }, { name: "note", width: 70, sortable: false } ], rowNum: 10, rowList: [5, 10, 20], pager: "#pager", rownumbers: true, sortname: "invdate", viewrecords: true, sortorder: "desc", caption: "Test for AltRows", height: "auto" }); 

请解决我的问题。

问题是陈旧的。 jqGrid不提供可变列宽。 它始终使用固定的列宽,并且在创建网格期间,即使在使用数据填充网格之前,也会设置每列的宽度。 此外,jqGrid不提供允许您在创建网格后更改列宽度的方法。

不过要求仍然存在。 需要创建一些带有列的网格,这些列的宽度是根据列中文本的内容动态设置的。

我在回答 setColWidth方法中建议,可以在创建网格后更改列宽。 使用该方法可以建议您的需求的一些实现。 我为你创建了演示 ,演示了这一点。 它使用以下代码

 $("#list").bind("jqGridAfterLoadComplete", function () { var $this = $(this), iCol, iRow, rows, row, cm, colWidth, $cells = $this.find(">tbody>tr>td"), $colHeaders = $(this.grid.hDiv).find(">.ui-jqgrid-hbox>.ui-jqgrid-htable>thead>.ui-jqgrid-labels>.ui-th-column>div"), colModel = $this.jqGrid("getGridParam", "colModel"), n = $.isArray(colModel) ? colModel.length : 0, idColHeadPrexif = "jqgh_" + this.id + "_"; $cells.wrapInner(""); $colHeaders.wrapInner(""); for (iCol = 0; iCol < n; iCol++) { cm = colModel[iCol]; colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth() + 25; // 25px for sorting icons for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) { row = rows[iRow]; if ($(row).hasClass("jqgrow")) { colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth()); } } $this.jqGrid("setColWidth", iCol, colWidth); } }); 

首先,我将网格中所有单元格的内容和列标题的内容包装在范围内: 。 它允许我计算细胞内容的宽度。 然后我遍历所有行和所有行,并找到我在调用setColWidth方法中使用的最大宽度。

要小心,上面的解决方案只是第一次尝试根据内容实现列的“自动宽度”。 如果网格内容更复杂,它就无法工作。

顺便说一下,在排序和分页时,将更改列的宽度,因为在这种情况下将更改列的最大宽度。

更新:如果使用columnChooser或其他方法,则需要在更多事件上重新计算列宽作为jqGridAfterLoadComplete 。 要做到这一点,只需在"jqGridAfterLoadComplete"之后的bind / on中添加相应的事件名称(事件名称分隔空格)。 例如,答案演示了在columnChooser之后重新计算列宽。 一个只使用$("#list1").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {...}); 而不是$("#list").bind("jqGridAfterLoadComplete", function () {...});

更新2: 自由jqGrid中包含的开箱即用的function, jqGrid的分支,我从2014年底开始开发。该function已包含在免费jqGrid的第一个版本(v4.8)中。 查看维基 。 当前版本的免费jqGrid是4.13.0。 因此,不需要遵循上述技巧,只需将jqGrid升级到当前版本的free jqGrid。 可以包含cmTemplate: { autoResizable: true }以使所有列可自动resize,并添加autoresizeOnLoad: true选项以在每次加载结束时重置所有列的宽度。 或者,只要想要重新计算所有可自动resize的列的宽度,就可以调用autoResizeAllColumns()方法。