JavaEasyuiTree
EasyuiTree
根据文件路径,使用easyui生成目录结构
实体类
/**实体类,存储文件属性*/
public class Obj {
//{ "id":"11", "pId":"0", "name":"基础数据"},
private Integer id;
private Integer pId;//父节点id
private String name;//文件名
private String AbsPath;//全路径名
get/set
@Override
public String toString()
}
mainRunTest
public class ReadFile {
private static Integer index = 1;
private static List<Obj> list;
public static void main(String[] args) throws FileNotFoundException {
list = new ArrayList<>();
File file = new File("D:/wwww");
//0:记录父节点的层级,最开始没有则以0标示
getFileName(file,0);
System.out.println(list);
}
//{ "id":"11", "pId":"0", "name":"基础数据"},
//最关键的一步在于pId,当判定为文件夹时会传入到方法中作为子文件的pId
public static void getFileName(File file,Integer pId) throws FileNotFoundException{
//文件不存在抛异常
if(!file.exists()){
throw new FileNotFoundException("文件不存在");
}
//不管是文件还是文件夹都将参数设置到bean对象中
Obj o = new Obj();
o.setId(index);
o.setpId(pId);
o.setAbsPath(file.getAbsolutePath());
o.setName(file.getName());
list.add(o);
if(file.isDirectory()){
//是文件夹则需要获取里面的所有文件,并递归
File[] listFiles = file.listFiles();
for(File f:listFiles){
index++;//为每一个文件设置编号,1开始
//这里将文件的id传入,如果是文件夹这遍历里面的文件时设置pId将指引到该文件
getFileName(f,o.getId());
}
}
}
}
使用servlet渲染到页面
public class JsonTree extends HttpServlet{
private static final long serialVersionUID = 1L;
private static Integer index;//存文件的编号
private static List<Obj> list;//存文件对象
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("JsonTree.doGet().....");
list = new ArrayList<>();
index = 1;
File file = new File("D:/www");
getFileName(file,0);
System.out.println(list);
JSONArray json = JSONArray.fromObject(list);
resp.setCharacterEncoding("UTF-8");
resp.setContentType("text/html; charset=UTF-8");
resp.getWriter().write(json.toString());
}
//最关键的一步在于pId,当判定为文件夹时会传入到方法中作为子文件的pId
public static void getFileName(File file,Integer pId) throws FileNotFoundException{
//文件不存在抛异常
if(!file.exists()){
throw new FileNotFoundException("文件不存在");
}
Obj o = new Obj();
setObjParam(file, pId, o);
list.add(o);
if(file.isDirectory()){
File[] listFiles = file.listFiles();
for(File f:listFiles){
index++;
getFileName(f,o.getId());
}
}
//设置参数
private static void setObjParam(File file, Integer pId, Obj o) {
o.setId(index);
o.setpId(pId);
o.setAbsPath(file.getAbsolutePath());
o.setName(file.getName());
}
}
jsp, 这里用了easyui插件渲染结构
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css">
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
</style>
<title>layout</title>
</head>
<body>
<div id="cc" class="easyui-layout" style="width: 100%; height: 100%;">
<div data-options="region:'north',title:'North Title',split:true"
style="height: 100px;">north</div>
<div data-options="region:'south',title:'South Title',split:true"
style="height: 100px;">south</div>
<div class="easyui-accordion"
data-options="region:'west',title:'West',split:true"
style="width: 200px;">
<ul id="ztree" class="ztree"></ul>
<script type="text/javascript">
$(function(){ //使用简单json数据构造ztree（重点）
var setting = {//动态创建ztree
data:{
simpleData:{
enable:true//使用简单json数据构造ztree
}
}
};
//id:指定级别,pId:指定是哪个id的子集,name:显示内容
$.ajax({
url: "${pageContext.request.contextPath }/tree",
success: function(data){
var nodes = JSON.parse(data);
$.fn.zTree.init($("#ztree"), setting, nodes);
}
});
});
</script>
</div>
<div id="mytabs" class="easyui-tabs" data-options="region:'center',title:'center title'" style="padding: 5px; background: #eee;">
<div title="Tab1" style="padding: 20px; display: none;">tab1</div>
<div title="Tab2" data-options="closable:true"
style="overflow: auto; padding: 20px; display: none;">tab2</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true"
style="padding: 20px; display: none;">tab3</div>
</div>
</div>
</body>
</html>
