jqgriddemo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>jQuery jqGrid Demo joyopod</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.ui.all.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-zh_CN.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<!--添加grid.tree.js -->
<script src="js/grid.treegrid.js" type="text/javascript"></script>
<script type="text/javascript" src="json2.js"></script>
</head>
<body>
<div>
</div>
<div class="content">
<table id="list1" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</div>
</body>
</html>
json2.js
$(document).ready(function(){
jQuery("#list1").jqGrid({
treeGrid: true,
treeGridModel: 'adjacency',
ExpandColumn: 'menu',
ExpandColClick: true,
url: 'tree1.json',
datatype: 'json',
colNames: ["menu", "url"],
colModel: [{
name: 'menu',
index: 'menu',
hidden: false,
sortable: false
}, {
name: 'url',
index:'url',
hidden: false
}],
pager: false,
height:'auto',
width:'500',
viewrecords: true,
caption:'LIST'
});
});
tree1.json
{
total:1,
page:1,
records:8,
rows:[
{
id: 1,
cell:[
'joyopod',
'第一级父节点 level=0',
0,
null,
false,
false
]
}, {
id: 2,
cell:[
'第一子节点',
'level=1',
1,
1,
true,
true
]
}, {
id: 3,
cell:[
'第二子节点',
'level=1',
1,
1,
true,
true
]
}, {
id: 4,
cell:[
'第三子节点',
'第二个父节点 leve=1',
1,
1,
false,
false
]
}, {
id: 5,
cell:[
'第一个孙子节点',
'第三个父节点 level=2',
2,
4,
false,
false
]
},
{
id: 6,
cell:[
'第一个曾孙节点',
'level=3',
3,
5,
false,
false
]
}, {
id: 7,
cell:[
'第一个玄孙节点',
'level=4',
4,
6,
true,
false
]
}
, {
id: 8,
cell:[
'960slj',
'id=8',
0,
null,
false,
false
]
},
{
id: 9,
cell:[
'第四个子节点',
'id=9 level=1',
1,
8,
true,
false
]
},
{
id: 10,
cell:[
'第五个子节点',
'id=10 level=1',
1,
8,
true,
false
]
}
]
}