CSS:
<!--jqGrid-->
<link rel="stylesheet" href="plugins/jqgird/css/ui.jqgrid.min.css"/>
DOM:
实例化的DOM元素必须是table
<table id="treegrid2"></table>
script:
<script src="plugins/jqgird/js/jquery.jqGrid.min.js"></script>
<script src="plugins/jqgird/js/grid.locale-zh.js"></script>
//当前页面脚本
<script type="text/javascript">
$(function(){
$(document).ready(function(){
var topicjson={
"response": [
{
"id": "1",
"Items": "Grouping",
"url":"www.baidu.com",
level:"0", parent:"", isLeaf:false, expanded:false, loaded:true
},
{
"id": "1_1",
"Items": "Simple Grouping",
"url":"www.baidu.com",
level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true
},
{
"id": "1_2",
"Items": "May be some other grouping",
"url":"www.baidu.com",
level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true
},
{
"id": "2",
"Items": "CustomFormater",
"url":"www.baidu.com",
level:"0", parent:"", isLeaf:false, expanded:false, loaded:false
},
{
"id": "2_1",
"Items": "Image Formatter",
"url":"www.baidu.com",
level:"1", parent:"2", isLeaf:false, expanded:false, loaded:false
}
,
{
"id": "2_1_1",
"Items": "Image Formatter",
"url":"www.baidu.com",
level:"2", parent:"2_1", isLeaf:true, expanded:false, loaded:false
},
{
"id": "2_1_2",
"Items": "Anchor Formatter",
"url":"www.baidu.com",
level:"2", parent:"2_1", isLeaf:true, expanded:false, loaded:false
}
,
{
"id": "2_2",
"Items": "Anchor Formatter",
"url":"www.baidu.com",
level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true
}
]
},
grid;
$('<table id="list2"></table>').appendTo('#topics');
var lastsel;
grid = jQuery("#treegrid2");
grid.jqGrid({
datastr: topicjson,//数据源
datatype: "jsonstring",//数据类型
//向后台请求数据
//url: '/Department/Query/',
//datatype: 'json',
//mtype: 'GET',
height: "auto",
width:"100%",
loadui: "enable",
colNames: ["id","Items","url"],
colModel: [
{name: "id",width:200, hidden:true, key:true},
{name: "Items", editable:true,width:250, resizable: false},
{name: "url",width:1, width:250, editable:true,hidden:false}
],
treeGrid: true,//启用girdTree
treeGridModel: "adjacency",//伸缩列模式
ExpandColumn: "Items", //伸缩列
ExpandColClick: true,
treeIcons: {plus:'ace-icon fa fa-caret-right bigger-160 blue',minus:'ace-icon fa fa-caret-down bigger-160 blue',leaf:'ace-icon fa fa-tags orange'},//树图标
caption: "jqGrid Demos",
autowidth: true,//宽度自适应
rowNum: 10000,
ExpandColClick: true,//列点击
jsonReader: {
repeatitems: false,
root: "response"
}
});
});
})
</script>
<style type="text/css">
.tree-wrap.tree-wrap-ltr{
display: inline-block;
}
.ui-icon.ui-icon-document-b.tree-leaf.treeclick{
position: relative;
}
.ui-icon.treeclick.ui-icon-triangle-1-s.tree-minus{
position: relative;
}
.ui-icon.treeclick.ui-icon-triangle-1-e.tree-plus{
position: relative;
}
</style>