原创MVC+ZTree实现权限树的功能

Posted IT技术分享社区

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原创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 ></script>

<script ></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,

                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({

                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、最终效果图:

以上是关于原创MVC+ZTree实现权限树的功能的主要内容,如果未能解决你的问题,请参考以下文章

ztree实现权限功能(横向显示)

Ztree使用教程

MVC小系列(十五)MVC+ZTree实现对树的CURD及拖拽操作

使用ztree展示树形菜单结构

ZTreed 的使用

zTree实现树菜单角色权限分配