“MVC+Nhibernate+Jquery-EasyUI” 信息发布系统第五篇（用户管理之“用户权限分配”）

一、在做权限分配之前，首先先了解“ZTree”这个插件，我的这个系统没有用Jquery-EasyUI的Tree。用的是”ZTree“朋友们可以试试，也很强大。点击下载ZTree插件。

1、介绍“ZTree”，在目录：\zTree\demo\cn\index.html,有个Demo，打开看一看。

2、这个是最简单的“不显示”节点图标的树。如果想用的话，点击右键“此框架-查看源代码”的方式。和查看Jquery-UI的方式一样。

“MVC+Nhibernate+Jquery-EasyUI” 信息发布系统第五篇（用户管理之“用户权限分配”）

3、下面这个是显示图标的树，我的系统用的就是这种样式！

“MVC+Nhibernate+Jquery-EasyUI” 信息发布系统第五篇（用户管理之“用户权限分配”）

4、接下来就看看是怎么使用吧。

（1）、右键查看源代码，看到引用插件的JS、CSS

    <link href="@Url.Content("~/zTree/css/zTreeStyle/zTreeStyle.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/zTree/js/jquery.ztree.core-3.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/zTree/js/jquery.ztree.excheck-3.1.js")" type="text/javascript"></script>

        （2）、系统演示：带图标的那种样式。

（3）、ZTree的属性：建议看看：http://www.ztree.me/v3/api.php ，下面是Demo中的源代码部分

<SCRIPT type="text/javascript">
        <!--
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        var zNodes =[
            { id:1, pId:0, name:"展开、折叠 自定义图标不同", open:true, iconOpen:"../../../css/zTreeStyle/img/diy/1_open.png", iconClose:"../../css/zTreeStyle/img/diy/1_close.png"},
            { id:11, pId:1, name:"叶子节点1", icon:"../../../css/zTreeStyle/img/diy/2.png"},
            { id:12, pId:1, name:"叶子节点2", icon:"../../../css/zTreeStyle/img/diy/3.png"},
            { id:13, pId:1, name:"叶子节点3", icon:"../../../css/zTreeStyle/img/diy/5.png"},
            { id:2, pId:0, name:"展开、折叠 自定义图标相同", open:true, icon:"../../../css/zTreeStyle/img/diy/4.png"},
            { id:21, pId:2, name:"叶子节点1", icon:"../../../css/zTreeStyle/img/diy/6.png"},
            { id:22, pId:2, name:"叶子节点2", icon:"../../../css/zTreeStyle/img/diy/7.png"},
            { id:23, pId:2, name:"叶子节点3", icon:"../../../css/zTreeStyle/img/diy/8.png"},
            { id:3, pId:0, name:"不使用自定义图标", open:true },
            { id:31, pId:3, name:"叶子节点1"},
            { id:32, pId:3, name:"叶子节点2"},
            { id:33, pId:3, name:"叶子节点3"}

        ];

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
        //-->
    </SCRIPT>

前台JS代码