EasyUI的异步Tree使用

最新推荐文章于 2023-12-26 18:19:23 发布

原创最新推荐文章于 2023-12-26 18:19:23 发布 · 986 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #异步

Web开发专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种使用EasyUI框架实现文件目录树的方法，并详细展示了前端与后端的交互过程，包括通过Ajax获取文件列表并展示为树形结构。

前端代码：

<script>
$(function(){
    $('#tree1').tree({    
    url:'server/displayTree?path=D:/scout/hub/target/hub/WEB-INF/'   
});             
 $('#tree1').tree({
   onClick: function(node){
        if (node.children==null || node.children==undefined){
             var url="server/displayServers?file="+node.id;
             $.get(url,{},function(data,textStatus){
             $("#p3").val(data);
             }
             );
        }
}
});
});
</script>

后端java代码：

@Action("displayTree")
	public void displayTree() throws Exception {	
		String path=request.getParameter("path");
		String idAbsolutePath=request.getParameter("id");
		if(idAbsolutePath!=null){
			path=idAbsolutePath;
		}
        	
        File dir = new File(path);
        if(!dir.exists()){
        	outJsonResult(new JSONArray());
        	return ;
        }
        File[] files = dir.listFiles();
        JSONArray paths=new JSONArray();
        for(int i=0;i<files.length;i++){
        	JSONObject file=new JSONObject();
        	file.put("id", files[i].getAbsolutePath());//此处id为绝对路径，这样以后便于查找这个节点的子节点
			file.put("text", files[i].getName());
			//当是文件夹的时候需要有这个额外的属性
			if(files[i].isDirectory()){	
			file.put("state", "closed");
			}
			paths.add(file);
        }
		outJsonResult(paths);
	}

效果展示：