zTree实现权限列表简单实例

zTree的简单实例

　　zTree 是一个依靠jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

　　zTree官网

　　zTreeAPI下载链接

　　页面主要引入一下几个文件：

<link type="text/css" rel="stylesheet" href="zTree/zTreeStyle.css" />
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>

　　html页面:

<div class="edit_content">
            <div class="qxlb">
                <div class="add_title"> 
                    <span>权限列表</span>
                </div>
                <div class="qxlb_content">
                <ul id="tree" class="ztree"></ul>
                </div>
            </div>
  </div>

　　核心js:

<SCRIPT type="text/javascript">
var zTree;
//创建树型结构
function createTree() {
    var setting = {
        check:{
            enable:true
        },
        view: {
            dblClickExpand: true,
            expandSpeed: ""
        },
        //异步加载
        async: {
            enable: true,//设置是否异步加载
            url:"<%=path%>/role/getResourcesList.do", //设置异步获取节点的 URL 地址
            otherParam: [ "roleId", '${updateRole.id}']
            
        },
        
        //这个data里面的pIdKey,idKey,name等等之类的都是对应后台查出的字段名字，在sql中写好或者在拼接json的时候先拼接好，前太接收的时候只要对应一直就可以了
        data: {
            simpleData: {
                enable: true,
                pIdKey: "PARENTID",
                idKey: "ID"
            },
                key: {
                    checked: "CHECKED",
                    name:"NAME"
                }
        },
        callback: {
          onAsyncSuccess: zTreeOnAsyncSuccess  
    }  
    };
    //初始化   
    zTree = $.fn.zTree.init($("#tree"), setting);   
    zTree.expandAll(true);
}
/* 异步加载无法展开tree 默认展开一级菜单 */
var firstAsyncSuccessFlag = 0;
function zTreeOnAsyncSuccess(event, treeId, msg) {  
if (firstAsyncSuccessFlag == 0) {  
          try {  
                 //调用默认展开第一个结点  
                 var selectedNode = zTree.getSelectedNodes();  
                 var nodes = zTree.getNodes();  
                 zTree.expandNode(nodes[0], true);  
                 var childNodes = zTree.transformToArray(nodes[0]);  
                 zTree.expandNode(childNodes[1], true);  
                 zTree.selectNode(childNodes[1]);  
                 var childNodes1 = zTree.transformToArray(childNodes[1]);  
                 zTree.checkNode(childNodes1[1], true, true);  
                 firstAsyncSuccessFlag = 1;  
           } catch (err) {  
           
           }  
     }  
}

$(function(){
    //页面加载完成创建树
    createTree();   
});

function submitRole(){
    //获取选中的节点，传到后台
    var nodes = zTree.getCheckedNodes();
    var ids = [];
    for(var i=0,l=nodes.length;i<l;i++){
       ids[ids.length] = nodes[i].ID;
    }
    //var _resourcesIds=ids.join(",");
    document.getElementById("hidden_resourceList").value=ids.join(",");
            
    //$("#resourcesRoleListForm").submit();
}
</SCRIPT>

　　其中数据通过后台递归查询实现，以json的形式传到前台，进行接收。更多的内容可以参考API，里面的例子很详细。

转载于:https://www.cnblogs.com/xieshuang/p/5359034.html