jqgrid 加载本地树形数据demo
时间: 2024-02-17 07:07:21 浏览: 118
jqGrid demo
下面是一个简单的 jqGrid 加载本地树形数据的示例代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqGrid加载本地树形数据示例</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<script>
$(function() {
var mydata = [
{id: '1', name: '节点1', parent_id: '0'},
{id: '2', name: '节点2', parent_id: '0'},
{id: '3', name: '节点3', parent_id: '1'},
{id: '4', name: '节点4', parent_id: '1'},
{id: '5', name: '节点5', parent_id: '2'},
{id: '6', name: '节点6', parent_id: '2'},
{id: '7', name: '节点7', parent_id: '3'},
{id: '8', name: '节点8', parent_id: '3'},
{id: '9', name: '节点9', parent_id: '4'},
{id: '10', name: '节点10', parent_id: '4'}
];
$("#treegrid").jqGrid({
datatype: "local",
data: mydata,
colNames: ['ID', '名称', '父节点'],
colModel: [
{name:'id', index:'id', width:55},
{name:'name', index:'name', width:200},
{name:'parent_id', index:'parent_id', width:100}
],
treeGrid: true,
treeGridModel: 'adjacency',
ExpandColumn: 'name',
height: 'auto',
caption: '本地树形数据示例'
});
});
</script>
</head>
<body>
<table id="treegrid"></table>
</body>
</html>
```
在浏览器中打开该页面,即可看到一个简单的本地树形数据的 jqGrid 表格。
阅读全文