zoukankan      html  css  js  c++  java
  • 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,里面的例子很详细。

  • 相关阅读:
    toj 2819 Travel
    toj 2807 Number Sort
    zoj 2818 Prairie dogs IV
    zoj 1276 Optimal Array Multiplication Sequence
    toj 2802 Tom's Game
    toj 2798 Farey Sequence
    toj 2815 Searching Problem
    toj 2806 Replace Words
    toj 2794 Bus
    css截取字符
  • 原文地址:https://www.cnblogs.com/xieshuang/p/5359034.html
Copyright © 2011-2022 走看看