ztree的异步加载

异步加载ZTree实现

最新推荐文章于 2022-01-19 09:41:52 发布

原创最新推荐文章于 2022-01-19 09:41:52 发布 · 538 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ztree #tree #异步加载

个人专栏收录该内容

19 篇文章

订阅专栏

异步加载：是指在数据量大的情况下，默认只加载根节点，当点击这个节点的时候才去加载这个节点下的子节点，不会一下子全部加载出数据，提高了查询数据的效率。

1.先引入ztree插件到静态文件目录下，包含js和css

2.建一个节点的实体类

public class TreeNode {
	 private String id;  
	    private String pId;  
	    private String name;  
	    private Boolean isParent;  
	    private Boolean hasChild;  
	    private String level;
	    public String getLevel() {
			return level;
		}
		public void setLevel(String level) {
			this.level = level;
		}
		public String getId() {  
	        return id;  
	    }  
	    public void setId(String id) {  
	        this.id = id;  
	    }  
	    public String getpId() {  
	        return pId;  
	    }  
	    public void setpId(String pId) {  
	        this.pId = pId;  
	    }  
	    public String getName() {  
	        return name;  
	    }  
	    public void setName(String name) {  
	        this.name = name;  
	    }  
	    public Boolean getIsParent() {  
	        return isParent;  
	    }  
	    public void setIsParent(Boolean isParent) {  
	        this.isParent = isParent;  
	    }  
	    public Boolean getHasChild() {  
	        return hasChild;  
	    }  
	    public void setHasChild(Boolean hasChild) {  
	        this.hasChild = hasChild;  
	    }    
	    
	  public TreeNode(String id, String pId,  
	    String name,  
	    Boolean isParent, 
	     Boolean hasChild,String level) {
			super();
			this.id = id;
			this.pId = pId;
			this.name = name;
			this.isParent = isParent;
			this.hasChild = hasChild;
			this.level=level;
		}
}

3.相关jsp：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="<%=basePath %>/static/css/zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="<%=basePath %>/static/js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="<%=basePath %>/static/js/jquery.ztree.core-3.1.js"></script>


  <script type="text/javascript">
		$(document).ready(function(){  
		    initMyZtree();  
		});  
		  
		var zNodes="";  
		var setting = {  
		    view: {  
		        selectedMulti: false,  
		        fontCss: setFontCss  
		    },  
		    async: {  
		        enable: true,  
		        url:"getZtree.do",  
		        autoParam:["id"]  
		    },  
		    callback: {  
		        beforeClick: beforeClickZtree  
		    }  
		};  
		  
		function initMyZtree(){  
		    $.ajax({                 
		        type: "POST",                 
		        dataType: "json",                 
		        url: 'getZtree.do',     
		        success: function(data) { 
		        	zNodes=data;  
		            $.fn.zTree.init($("#treeDemo"), setting, zNodes);  
		        }     
		    });    
		      
		}  
		  
		//单击事件  
		function beforeClickZtree(treeId, treeNode){  
		    alert(treeNode.id+","+treeNode.name);  
		}  
		  
		//设置字体 颜色
		function setFontCss(treeId, treeNode) {  
		    if(treeNode.level==0){  
		        return {'font-weight':'bold','color':'red'};  
		    }else if(treeNode.level==1){  
		        return {'font-weight':'bold','color':'green'};  
		    }else if(treeNode.level==2){  
		        return {'font-weight':'bold','color':'blue'};  
		    }else{  
		        return {};  
		    }  
		}; 
	</script>
</head>

<body>
 <ul id="treeDemo" class="ztree"></ul>  
</body>
</html>

4.controller处理:

数据是自己做的，没有查数据库

/**
     * ztree
     * @return
	 * @throws Exception 
     */
    @RequestMapping(value="getZtree.do")  
    @ResponseBody
    public String LoadTree(HttpServletResponse response,HttpServletRequest request) throws Exception
    {
    	
    	String id=request.getParameter("id");
    	System.out.println("*********"+id+"**********");  
        if("null".equals(id)||"".equals(id)||id==null){  
            id="0";  
        }  
        List<TreeNode> list=new ArrayList<TreeNode>(); //所有
        list.add(new TreeNode("CPIC","0","A",true,true,"0"));
    	list.add(new TreeNode("C01","CPIC","B",true,true,"1"));
    	list.add(new TreeNode("C02","CPIC","C",true,true,"1"));
    	list.add(new TreeNode("C001","C01","D",true,false,"2"));
    	list.add(new TreeNode("C002","C02","E",true,false,"2"));
        List<TreeNode> relist=new ArrayList<TreeNode>(); //需要的
        
        JSONArray jarray=new JSONArray();
        try {  
        	for (TreeNode t : list) {
    			if(t.getpId().equals(id)){
    				relist.add(t);
    			}
    		}
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
        jarray.addAll(relist);  
        System.out.println(jarray.toString());  
        response.setCharacterEncoding("utf-8");  
        PrintWriter pw = null;  
        try {  
            pw = response.getWriter();  
            pw.write(jarray.toString());  
        } catch (IOException e) {  
            e.printStackTrace();  
        }  
        pw.flush();  
        pw.close();  
        return null;  
    }

5.预览：