jqgrid 4.6 treeReader 加载本地树形数据demo
时间: 2023-09-01 12:06:21 浏览: 145
以下是一个简单的本地树形数据的 jqGrid 4.6 的 demo:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jqGrid 4.6 TreeReader Demo</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.bootcss.com/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<script>
$(function () {
$("#list").jqGrid({
url: 'data.json',
datatype: "json",
mtype: "GET",
colModel: [
{name: "id", width: 50},
{name: "name", width: 150},
{name: "parent", width: 100, hidden: true}
],
treeGrid: true,
treeGridModel: "adjacency",
ExpandColumn: "name",
ExpandColClick: true,
caption: "jqGrid 4.6 TreeReader Demo",
height: "auto",
rowNum: 10000,
jsonReader: {
repeatitems: false,
root: function (obj) {
return obj;
},
page: function () {
return 1;
},
total: function () {
return 1;
},
records: function (obj) {
return obj.length;
}
},
treeReader: {
parent_id_field: "parent",
level_field: "level",
leaf_field: "isLeaf",
expanded_field: "expanded"
}
});
});
</script>
</head>
<body>
<table id="list"></table>
</body>
</html>
```
上述示例中,我们使用 `treeGrid` 和 `treeGridModel` 来启用 jqGrid 的树形功能,并使用 `ExpandColumn` 和 `ExpandColClick` 来使树形结构可以展开和收缩。`jsonReader` 和 `treeReader` 分别用于解析 JSON 数据和树形结构的数据。
在 `jsonReader` 中,我们将 `root` 属性设置为返回整个 JSON 数据,将 `records` 属性设置为返回 JSON 数组的长度,而其他属性则按默认值设置即可。
在 `treeReader` 中,我们使用了 `parent_id_field`、`level_field`、`leaf_field` 和 `expanded_field` 来指定树形结构中每个节点的父节点 ID、层级、是否为叶子节点和是否展开。这些属性的值需要在 JSON 数据中提供。
同时,我们还提供了一个名为 `data.json` 的本地 JSON 数据文件,其中包含了一个简单的树形结构数据。你可以根据需要修改该文件的内容。
阅读全文