gpt4 book ai didi

javascript - Jqgrid 列宽根据其内容

转载 作者:塔克拉玛干 更新时间:2023-11-02 23:05:24 25 4
gpt4 key购买 nike

我的 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 不提供允许您在创建网格后更改列宽的方法。

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

我在 the answer 中建议setColWidth创建网格后可以更改列宽的方法。使用方法可以建议您的要求的一些实现。我创建了 the demo为你证明了这一点。它使用以下代码

$("#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 class='mywrapping'></span> .它允许我计算单元格内容的宽度。然后我遍历所有行和所有行并找到我在调用中使用的最大宽度 setColWidth方法。

请注意,上述解决方案只是第一次尝试根据内容实现列的“自动宽度”。它无法在网格内容更复杂的情况下工作。

顺便说一句,列的宽度将在排序和分页时发生变化,因为在这种情况下列的最大宽度将发生变化。

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

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

关于javascript - Jqgrid 列宽根据其内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24322006/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com