【原創】MVC+ZTree實現權限樹的功能

今天自己采用MVC+ZTree的技術實現權限樹的功能，有需要的可以收藏一下。

1、需要引用的JS 文件

    <link href="~/Content/ZTree/css/demo.css" rel="stylesheet" />   
    <link href="~/Content/ZTree/css/metroStyle/metroStyle.css" rel="stylesheet" />
    <script src="~/Content/ZTree/js/jquery.ztree.core.js"></script>
    <script src="~/Content/ZTree/js/jquery.ztree.excheck.min.js"></script>

　　

2、html代碼

  <div class="form-group">
                    <div class="label">
                        <label>權限樹：</label>
                    </div>
                    <div class="field">
                        <ul style="width:400px;height:200px;" id="treeDemo" class="ztree"></ul>
                    </div>
                </div> 

3、JS代碼

<script type="text/javascript">

        var setting = {
            async: {
                enable: true,
                url: '/RoleToPerssion/GetPerssionTree',//異步加載時的請求地址
                autoParam: ["roleid"],//提交參數
                type: 'get',
                dataType: 'json'
            },
            check: {
                enable: true,   //true / false 分別表示 顯示 / 不顯示 復選框或單選框
                autoCheckTrigger: true,   //true / false 分別表示 觸發 / 不觸發 事件回調函數
                chkStyle: "checkbox",   //勾選框類型(checkbox 或 radio）
                //chkboxType: { "Y": "p", "N": "s" }   //勾選 checkbox 對於父子節點的關聯關系
            },
            checkable: true,
            showIcon: true,
            showLine: true,
            data: {
                simpleData: {
                    enable: true
                }
            },
            expandSpeed: "",
            callback: {
                onClick: zTreeOnClick
            }
        };

        $(document).ready(function () {
            $.ajax({
                url: '/RoleToPerssion/GetPerssionTree?roleid=""',//異步加載時的請求地址
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    $.fn.zTree.init($("#treeDemo"), setting, data);
                }
            });
        });
      
        //單擊時獲取zTree節點的Id,和value的值
        function zTreeOnClick(event, treeId, treeNode, clickFlag) {
           // var treeValue = treeNode.Id + "," + treeNode.name;
            //alert(treeNode.Id + "," + treeNode.name);
        };
        //獲取選中value值
        function GetIDs() {
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = treeObj.getCheckedNodes(true),
                v = "";
            var ids = "";
            for (var i = 0; i < nodes.length; i++) {
                v += nodes[i].name + ",";
                if (nodes[i].PId != "0") {
                    ids += nodes[i].Id + ",";
                }            
            }        
         
        }
    </script>

4、Mvc后台主要代碼

public class PerssonTreeModel 
        {
            public string Id { get; set; }
            /// <summary>
            /// 權限名稱
            /// </summary>
            public string name { get; set; }
            public string PId { get; set; }
            /// <summary>
            /// 子節點
            /// </summary>
            public List<PerssonTreeModel> children { get; set; }
            /// <summary>
            /// 是否有復選框
            /// </summary>
            public bool nocheck { get; set; }
            /// <summary>
            /// 是否展開節點
            /// </summary>
            public bool open { get; set; }
        }
　　　　 /// <summary>
        /// 獲取目錄樹的json
        /// </summary>
        /// <param name="roleid"></param>
        /// <returns></returns>
        public JsonResult GetPerssionTree(string roleid)
        {
            var parentlist = perssionbll.GetAllList().Where(m=>m.ParentId=="0").ToList();
            var childrenlist = perssionbll.GetAllList().Where(m => m.ParentId != "0").ToList();
            var result = new List<PerssonTreeModel>();
            if (parentlist!=null && parentlist.Count>0)
            {
                foreach(var item in parentlist)
                {
                    result.Add(new PerssonTreeModel {
                        Id = item.id,
                        name = item.Title,
                        PId = item.ParentId,
                        nocheck = true,
                        open = true,
                        children = GetChildrenList(item.id,childrenlist)
                    });
                }
            }
            return Json(result,JsonRequestBehavior.AllowGet);
            
        }
        /// <summary>
        /// 獲取一級權限下面的子節點
        /// </summary>
        /// <param name="id"></param>
        /// <param name="list"></param>
        /// <returns></returns>
        public List<PerssonTreeModel> GetChildrenList(string id, List<T_Permissions> list)
        {
            var result = new List<PerssonTreeModel>();
            list = list.Where(m => m.ParentId == id).ToList();
            if (list != null && list.Count > 0)
            {
                foreach (var item in list)
                {
                    result.Add(new PerssonTreeModel
                    {
                        Id = item.id,
                        name = item.Title,
                        PId = id,
                        open = false,
                        nocheck = false,
                        children = null
                    });
                }
            }
            return result;
        }

5、最終效果圖：