jqgird tree table 分页显示
时间: 2023-10-22 16:05:00 浏览: 166
JQGrid 分页
5星 · 资源好评率100%
jqGrid TreeGrid 是基于 jQuery 的一个表格插件,可以实现树形结构的表格显示。如果要实现 TreeGrid 分页显示,可以通过以下步骤:
1. 设置 TreeGrid 的分页属性。
可以通过设置 "treeGrid:true" 和 "treeGridModel:'adjacency'" 开启 TreeGrid 功能,并且设置 "rowNum" 和 "rowList" 分别为每页显示的行数和可选择的行数。
2. 设置 TreeGrid 的数据源。
可以通过设置 "url" 属性来指定 TreeGrid 的数据来源,同时设置 "datatype:'json'" 来指定数据类型。
3. 设置 TreeGrid 的列属性。
可以通过设置 colModel 属性来定义 TreeGrid 的列属性,其中需要注意设置 "name" 和 "index" 属性,分别表示列名和列的索引。
4. 设置 TreeGrid 的分页工具栏。
可以通过设置 "pager:true" 和 "rownumbers:true" 来显示分页工具栏和行号。
5. 设置 TreeGrid 的分页回调函数。
可以通过设置 "loadComplete" 和 "onPaging" 回调函数来处理分页回调事件,例如重新加载数据源。
下面是一个示例代码:
```javascript
$("#treegrid").jqGrid({
url: "data.json",
datatype: "json",
mtype: 'GET',
colModel: [
{ name: "id", index: "id", hidden: true },
{ name: "name", index: "name" },
{ name: "price", index: "price" },
{ name: "quantity", index: "quantity" }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: true,
rownumbers: true,
treeGrid: true,
treeGridModel: "adjacency",
loadComplete: function(data) {
// 处理加载完成事件
},
onPaging: function(pgButton) {
// 处理分页事件
$("#treegrid").jqGrid("setGridParam", {
url: "data.json",
datatype: "json",
mtype: 'GET',
page: pgButton,
loadComplete: function(data) {
// 处理重新加载完成事件
}
}).trigger("reloadGrid");
}
});
```
阅读全文