[英]Jqgrid Column width According to Its Content
我的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: "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 class='mywrapping'></span>
。 它允許我計算細胞內容的寬度。 然后我遍歷所有行和所有行,並找到我在調用setColWidth
方法中使用的最大寬度。
要小心,上面的解決方案只是第一次嘗試根據內容實現列的“自動寬度”。 如果網格內容更復雜,它就無法工作。
順便說一下,在排序和分頁時,將更改列的寬度,因為在這種情況下將更改列的最大寬度。
更新:如果使用columnChooser
或其他方法,則需要在更多事件上重新計算列寬作為jqGridAfterLoadComplete
。 要做到這一點,只需在"jqGridAfterLoadComplete"
之后的bind / on中添加相應的事件名稱(事件名稱分隔空格)。 例如,答案演示了在columnChooser
之后重新計算列寬。 一個只使用$("#list1").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {...});
而不是$("#list").bind("jqGridAfterLoadComplete", function () {...});
更新2: 自由jqGrid中包含的開箱即用的功能, jqGrid的分支,我從2014年底開始開發。該功能已包含在免費jqGrid的第一個版本(v4.8)中。 查看維基 。 當前版本的免費jqGrid是4.13.0。 因此,不需要遵循上述技巧,只需將jqGrid升級到當前版本的free jqGrid。 可以包含cmTemplate: { autoResizable: true }
以使所有列可自動調整大小,並添加autoresizeOnLoad: true
選項以在每次加載結束時重置所有列的寬度。 或者,只要想要重新計算所有可自動調整大小的列的寬度,就可以調用autoResizeAllColumns()
方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.