zoukankan      html  css  js  c++  java
  • 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,  1, key: true },
                            { label: '名称', name: 'Name', index: 'Name',  200, fixed: true },
                            { label: '时间', name: 'Age', index: 'Age',  200, fixed: true },
                            { label: '主管', name: 'Director', index: 'Director',  100 },
                            { label: 'ParentID', name: 'ParentID', index: 'ParentID', hidden: true,  1 }
                    ],
                loadComplete: function (data) {
                    consoleLog("loadComplete_data=" + data);
                },
                auto 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; }
        }
  • 相关阅读:
    CentOS随笔
    CentOS随笔
    CentOS随笔
    CentOS随笔
    产品从生到死的N宗罪
    即将结束的2015。
    Mvvm
    android 热补丁修复框架
    反编译APK
    关于短视频
  • 原文地址:https://www.cnblogs.com/gossip/p/3714245.html
Copyright © 2011-2022 走看看