jqGrid Tree

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>