我的Jqgrid中有许多列。所有列两边显示额外的空间。我想要那个没有额外间距的列。列宽度应该有宽度根据其内容。我已经尝试过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: "d-M-Y" }, datefmt: "d-M-Y"
},
{ 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("<span class='mywrapping'></span>");
$colHeaders.wrapInner("<span class='mywrapping'></span>");
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);
}
});
首先,我将网格的所有单元格的内容和列标题的内容包装在span: <span class='mywrapping'></span>
内。它允许我计算单元格内容的宽度。然后我遍历所有行和所有行,找到我在call setColWidth
方法中使用的最大宽度。
要小心,上面的解决方案只是第一次尝试实现"autowidth"的列基于内容。如果网格中有更复杂的内容,它就不能工作了。
顺便说一下,在排序和分页时,列的宽度将被更改,因为在这种情况下,列的最大宽度将被更改。
UPDATED:如果使用columnChooser
或其他方法,则需要在更多事件上重新计算列宽度为jqGridAfterLoadComplete
。要做到这一点,只需在"jqGridAfterLoadComplete"
之后的bind/on中添加相应的事件名称(事件名称除以空格)。例如,答案演示了在columnChooser
之后重新计算列宽度。一个只用$("#list1").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {...});
代替$("#list").bind("jqGridAfterLoadComplete", function () {...});
UPDATED 2:该功能包含在免费的jqGrid中,这是jqGrid的分支,我从2014年底开始开发。该特性已经包含在免费jqGrid的第一个版本(v4.8)中。参见wiki。免费jqGrid的当前版本是4.13.0。因此,不需要遵循上面描述的技巧,只需将jqGrid升级到免费jqGrid的当前版本。可以包括cmTemplate: { autoResizable: true }
,使所有列自动调整大小,并添加autoresizeOnLoad: true
选项,在每次加载结束时重置所有列的宽度。或者,当你想重新计算所有自动调整大小的列的宽度时,你可以调用autoResizeAllColumns()
方法。