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; }
        }
  • 相关阅读:
    Saltstack module apache 详解
    Saltstack module ip 详解
    Saltstack module iosconfig 详解
    Saltstack module introspect 详解
    Saltstack module inspector 详解
    Saltstack module ini 详解
    Saltstack module incron 详解
    Modbus 指令 RS485指令规则
    停车系统对接第三方在线支付平台(二)
    停车系统对接第三方在线支付平台
  • 原文地址:https://www.cnblogs.com/gossip/p/3714245.html
Copyright © 2011-2022 走看看