ztree 的简单json 的学习事例

快来打我* 2022-08-20 11:18 178阅读 0赞

一.一次性加载所有树节点和异步加载树节点

页面代码HTML：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>CMS</title>
    	</head>
    	<body style="background-color: white;">
    		<div class="zTree-content" id="treeNames">
    		    <ul id="treeDemo" class="ztree">
    		    </ul>
    		    <ul id="treeDemo2" class="ztree">
    		    </ul>
    		</div><br/>
    	</body>
    
    <link rel="stylesheet" href="../assets/css/zTree/zTree.css" type="text/css" />
    <link rel="stylesheet" href="../ace/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../ace/assets/css/ace.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/role.css" />
    <style type="text/css">
    	.form-actions {
    		background-color: white;
    	}
    </style>
    <script type="text/javascript" src="../assets/js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="../assets/js/zTree/jquery.ztree.core-3.5.min.js"></script>
    <script type="text/javascript" src="../assets/js/zTree/jquery.ztree.excheck-3.5.min.js"></script>
    <script type="text/javascript" src="../assets/js/zTree/jquery.ztree.exedit-3.5.min.js"></script>	
    <script th:inline="javascript">
    	/*<![CDATA[>*/
    	$(function(){
    		//一次性价在所有的数据
    		var setting = {
    				view: {
    	                showIcon: false,
    	                showLine: true
    	            },
    				check: {
    					enable: true
    				},
    				data: {
    					simpleData: {
    						enable: true
    					}
    				}			
    	   };
    		 $.get('/tests',function(data){
    			 $.fn.zTree.init($("#treeDemo"), setting, data.returnList);
    		}); 
    		//分批次异步加载数据
    		var setting2 = {
    				async: {
    					enable: true,
    					type: "get",
    					url:"/testss",
    					autoParam: ["id", "name"]
    				}
    			};
    
    			function filter(treeId, parentNode, childNodes) {
    				if (!childNodes) return null;
    				for (var i=0, l=childNodes.length; i<l; i++) {
    					childNodes[i].name = childNodes[i].name.replace('/\.n/g', '.');
    				}
    				return childNodes;
    			}
    
    			$(document).ready(function(){
    				$.fn.zTree.init($("#treeDemo2"), setting2);
    			});
    	});
    	/*]]>*/          
    	</script>
    </html>

Controller: 代码：

@RequestMapping("/tests")
        @ResponseBody
        public Map<String,Object> tests(){
        	List<Map<String,Object>> list = new ArrayList<Map<String,Object>>();
        	Map<String,Object> map = new HashMap<String,Object>();
        	map.put("id", 1);
        	map.put("name", "cyc");
        	map.put("pId", 0);
        	list.add(map);
        	for(int i=1;i<7;i++){
        		Map<String,Object> objMap = new HashMap<String,Object>();
        		objMap.put("id", i+1);
        		objMap.put("name", "cyc"+(i+1));
        		objMap.put("pId", i);
        		list.add(objMap);
        	}
        	Map<String,Object> maps = new HashMap<String,Object>();
        	maps.put("id",8);
        	maps.put("name", "cyc9");
        	maps.put("pId",6);
        	list.add(maps);
        	Map<String,Object> returnMap = new HashMap<String,Object>();
        	returnMap.put("returnList", list);
        	return returnMap;
        }
        @RequestMapping("/testss")
        @ResponseBody
        public List<Map<String,Object>> testss(String id){
        	List<Map<String,Object>> list = new ArrayList<Map<String,Object>>();
        	if(StringHelper.isEmpty(id)){
        		id = "1";
        	}
        	int parentId = Integer.parseInt(id);
        	Map<String,Object> map = new HashMap<String,Object>();
    		map.put("id", parentId+1);
    		map.put("name","cyc");
    		map.put("pId",parentId);
    		map.put("isParent",true);
    		list.add(map);
        	return list;
        }

代码展示后的样子：  
![Center][]

[Center]: /images/20220731/51ccb5319972442a8e90897c04ca4ee1.png