因为项目需要,最近写了一个文件管理器(即管理本地文件的模块)。
刚开始写这个模块的时候,想到的是用jQuery的文件管理器插件jqueryFileTree。写完以后,发现一些问题,比如模块的样式和按钮功能都不好控制,改起来相当麻烦。后来想想,写这个模块也不是很难,下面是两次的对比图:
前者是用jQuery的插件做出的效果,后者是自己写的,当然也用到了jQueryeasyui的东西。
主要是左边树的实现,说白了,也就是遍历文件夹,拼成easyui tree需要的json根式的数据,上代码
package com.fable.fbs.fileUtil;
import java.util.ArrayList;
public class FileTreeNode {
private String id;
private String pid;
private String text;
private String state;
private ArrayList<FileTreeNode> children = new ArrayList<FileTreeNode>();
public FileTreeNode(String id,String pid,String text,String state){
this.id = id;
this.pid = pid;
this.text = text;
this.state = state;
}
public void add(FileTreeNode node){
if(node.pid.equals(this.id)) {
this.children.add(node);
}else {
for (FileTreeNode tmp_node : children) {
tmp_node.add(node);
}
}
}
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 getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public ArrayList<FileTreeNode> getChildren() {
return children;
}
public void setChildren(ArrayList<FileTreeNode> children) {
this.children = children;
}
}
public final List<FileTreeNode> showDirectory(File file,
List<FileTreeNode> list) throws Exception {
File[] f = file.listFiles();
FileTreeNode node = null;
for (int i = 0; i < f.length; i++) {
String state = "open"; //文件夹是否展示,默认展开
if (f[i].isDirectory()) {
File[] f1 = f[i].listFiles();
for (int j = 0; j < f1.length; j++) {
if (f1[j].isDirectory()) {
state = "closed"; //判断文件夹是否存在子文件夹,不存在状态 关闭
// node = new FileTreeNode(f[i].getAbsolutePath(),
// f[i].getParent(), f[i].getName(), "closed");
}
}
node = new FileTreeNode(f[i].getAbsolutePath(),
f[i].getParent(), f[i].getName(), state);
list.add(node);
showDirectory(new File(f[i].getAbsolutePath()), list);//递归 不断add子文件夹
}
}
return list;
}
@RequestMapping(value = "List/fileTree")
@ResponseBody
public String fileTree(HttpServletRequest request,HttpServletResponse response){
FileUtil fileUtil = new FileUtil();
String path = this.getSystemPhysicalPath();
path.subSequence(0, path.length()-1);
// String path = "d:\\test";
File file = new File(path);
FileTreeNode root = new FileTreeNode(file.getAbsolutePath(), file.getParent(), "根目录", "open");
List<FileTreeNode> list1 = new ArrayList<FileTreeNode>();
JSONObject obj = null;
// JSONArray obj = null;
String s;
try {
List<FileTreeNode> list = fileUtil.showDirectory(file,list1);
if (list != null) {
for (int i = 0; i < list.size(); i++) {
root.add(list.get(i));
}
}
obj = JSONObject.fromObject(root);
// obj = JSONArray.fromObject(root.getChildren());
} catch (Exception e) {
e.printStackTrace();
}
s = "["+obj.toString()+"]";
return s;//返回easyui tree所需的json串
}
前台代码如下
$("#fileTree").tree({
url:"........",
onClick: function(node){
var nodeId = encodeURI(encodeURI(node.id));
$('#grid').datagrid('load','../../Admin/Files/List/getFileByDir?dir='+nodeId);
},
animate:true
});
$("#fileTree") 是获取需要展示树的HTML元素,url对应后台返回easyui tree的json的url(整个框架用的是spring mvc)。$('#grid').datagrid('load','../../Admin/Files/List/getFileByDir?dir='+nodeId);这句话是加载某个文件夹下的文件列表,文件夹列表的json比较容易,这里不写了 。
整个过程就是这样,写的有点粗糙,不知道我的意思有没有表达清楚,如有不足,请各位多多指教,我也好学习