JqGrid TreeView使用

 

1、前端

    <script src="@Url.Content("~/Scripts/jquery/jquery-1.9.0.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/jqgrid/css/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Content/jqgrid/js/i18n/grid.locale-cn.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Content/jqgrid/js/jquery.jqGrid.min.js")" type="text/javascript"></script>

<link href="../../Content/jqui/jquery.ui.css" rel="stylesheet" type="text/css" />
<script src="../../Content/jqui/jquery.ui.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $('#list').jqGrid({
            url: '/JGrid/TreeGridGet',
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            datatype: 'json',
            mtype: 'GET',  //这里使用GET方法才能展开层级，不然接受的nodeid、n_level参数均为null
            treeGrid: true,
            treeGridModel: 'adjacency',
            ExpandColumn: 'Name',
            colModel: [
                        { label: 'ID', name: 'ID', index: 'ID', hidden: true, width: 1, key: true },
                        { label: '名称', name: 'Name', index: 'Name', width: 200, fixed: true },
                        { label: '时间', name: 'Age', index: 'Age', width: 200, fixed: true },
                        { label: '主管', name: 'Director', index: 'Director', width: 100 },
                        { label: 'ParentID', name: 'ParentID', index: 'ParentID', hidden: true, width: 1 }
                ],
            loadComplete: function (data) {
                consoleLog("loadComplete_data=" + data);
            },
            autowidth: true,
            height: 'auto',
            shrinkToFit: true
        });

        $("#list").jqGrid('setGroupHeaders', {
            useColSpanStyle: true,
            groupHeaders: [
                    {
                        startColumnName: 'Name',
                        numberOfColumns: 2,
                        titleText: '所有信息'
                    }
                ]
        });

        //输出日志
        function consoleLog(msg) {
            if (navigator.userAgent.indexOf("Firefox") > 0) {
                console.log(msg)
            }
        }
    });
</script>
<div id="QryResultGrid">
    <table id="list">
    </table>
</div>

 

2、后台

  public JsonResult TreeGridGet()
        {
            var depts = Department.GetDemoData();
            var nodeid = Request["nodeid"];
            var n_level = Request["n_level"];
            Guid? deptID = nodeid != null ? new Guid(nodeid) : new Nullable<Guid>();
            int level = n_level != null ? int.Parse(n_level) + 1 : 0;

            var subDepts = depts.Where<Department>(x => x.ParentID == deptID).ToList<Department>();

            var data = new
            {
                page = 1,
                total = 1,
                records = subDepts.Count,
                rows = (from dept in subDepts
                        select new
                        {
                            cell = new[]    //cell为JqGrid中约定的名称
                            {
                                dept.ID.ToString(),     
                                dept.Name,     
                                dept.Age,
                                dept.Director ,
                                dept.ParentID != null ? dept.ParentID.ToString() : "",                                
                                level.ToString(),   //Level
                                deptID != null ? deptID.ToString() : "null",    //ParentID
                                depts.Count<Department>(x => x.ParentID == dept.ID) == 0 ? "true":"false",  //isLeaf
                                "false", //expanded
                                "false"//loaded
                            }
                        })
            };

            return Json(data, JsonRequestBehavior.AllowGet);
        }
        #endregion
    }

 

    public class Department
    {
        private static List<Department> demoData = null;

        public static List<Department> GetDemoData()
        {
            if (demoData != null && demoData.Count > 0) return demoData;

            var dept1 = new Department() { ID = Guid.NewGuid(), Name = "think8848", Age = "11", Director = "John" };
            var dept2 = new Department() { ID = Guid.NewGuid(), Name = "user1", Age = "11", Director = "John", ParentID = dept1.ID };
            var dept3 = new Department() { ID = Guid.NewGuid(), Name = "user2", Age = "11", Director = "John", ParentID = dept1.ID };
            var dept4 = new Department() { ID = Guid.NewGuid(), Name = "user3", Age = "11", Director = "John", ParentID = dept1.ID };
            var dept5 = new Department() { ID = Guid.NewGuid(), Name = "user4", Age = "11", Director = "John", ParentID = dept2.ID };
            var dept6 = new Department() { ID = Guid.NewGuid(), Name = "user5", Age = "11", Director = "John", ParentID = dept2.ID };
            var dept7 = new Department() { ID = Guid.NewGuid(), Name = "user6", Age = "11", Director = "John", ParentID = dept6.ID };
            var dept8 = new Department() { ID = Guid.NewGuid(), Name = "user7", Age = "11", Director = "John", ParentID = dept7.ID };
            var dept9 = new Department() { ID = Guid.NewGuid(), Name = "user8", Age = "11", Director = "John", ParentID = dept3.ID };
            var dept10 = new Department() { ID = Guid.NewGuid(), Name = "user9", Age = "11", Director = "John", ParentID = dept3.ID };
            var dept11 = new Department() { ID = Guid.NewGuid(), Name = "user10", Age = "11", Director = "John", ParentID = dept3.ID };
            var dept12 = new Department() { ID = Guid.NewGuid(), Name = "user11", Age = "11", Director = "John", ParentID = dept4.ID };
            var dept13 = new Department() { ID = Guid.NewGuid(), Name = "user12", Age = "11", Director = "John", ParentID = dept8.ID };
            var dept14 = new Department() { ID = Guid.NewGuid(), Name = "user13", Age = "11", Director = "John", ParentID = dept3.ID };
            var dept15 = new Department() { ID = Guid.NewGuid(), Name = "user14", Age = "11", Director = "John", ParentID = dept4.ID };
            var dept16 = new Department() { ID = Guid.NewGuid(), Name = "user15", Age = "11", Director = "John", ParentID = dept5.ID };
            var dept17 = new Department() { ID = Guid.NewGuid(), Name = "user16", Age = "11", Director = "John", ParentID = dept6.ID };

            demoData = new List<Department>()
            {
                dept1,dept2,dept3,dept4,dept5,dept6,dept7,dept8,dept9,dept10,dept11,dept12,dept13,dept14,dept15,dept16,dept17
            };

            return demoData;
        }

        public Guid ID { get; set; }
        public string Name { get; set; }
        public string Age { get; set; }
        public string Director { get; set; }
        public Guid? ParentID { get; set; }
    }