zTree 异步加载文件目录树

最新推荐文章于 2022-07-21 18:19:25 发布
最新推荐文章于 2022-07-21 18:19:25 发布
阅读量2.6k 收藏 2
点赞数
分类专栏： web前端 文章标签： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iflow/article/details/74516436
版权
亲测可用，留念

JSP代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/common/jsp/mytag.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>文件树形展示</title>
<link rel="stylesheet" href="${webRoot}/plug-in/zTree/v3/css/demo.css" type="text/css">
<link rel="stylesheet" href="${webRoot}/plug-in/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${webRoot}/plug-in/zTree/v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${webRoot}/plug-in/zTree/v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${webRoot}/plug-in/zTree/v3/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript">
var setting = {
async: {
enable: true,
url:"${webRoot}/fileOperate/treedata",
   autoParam:["id", "name", "level","pid","open","isParent","click","path"]
},
check: {
enable: true
},
view : {  
            dblClickExpand : false,  
            showLine : false,
            selectedMulti: false
        },  
        data : {  
            simpleData : {  
                enable : true  
            }  
        },  
    callback: {
beforeAsync: beforeAsync,
onAsyncError: onAsyncError,
onAsyncSuccess: onAsyncSuccess,
onCheck: onCheck
},
        dataFilter: filter
};


function filter(treeId, parentNode, childNodes) {
console.log("filter:");console.log(parentNode);console.log(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;
}

//关键代码，通过treeNode遍历父亲节点，根节点再次调用getParentNode得到null终止循环
function getPathText(node){
        var s=node.name;
        while(node=node.getParentNode())s=node.name+'/'+s;
        return s;
    }

function showLog(str) {
console.log("showlog:"+str);
}

function onCheck(e, treeId, treeNode) {
showLog("[ "+getTime()+" onCheck ];" + getPathText(treeNode) );
}



var log, className = "dark";
function beforeAsync(treeId, treeNode) {
className = (className === "dark" ? "":"dark");
//showLog("[ "+getTime()+" beforeAsync ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
return true;
}
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
//showLog("[ "+getTime()+" onAsyncError ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
//showLog("[ "+getTime()+" onAsyncSuccess ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
}
function getTime() {
var now= new Date(),
h=now.getHours(),
m=now.getMinutes(),
s=now.getSeconds(),
ms=now.getMilliseconds();
return (h+":"+m+":"+s+ " " +ms);
}


function refreshNode(e) {
var zTree = $.fn.zTree.getZTreeObj("tree"),
type = e.data.type,
silent = e.data.silent,
nodes = zTree.getSelectedNodes();
if (nodes.length == 0) {
alert("请先选择一个父节点");
}
for (var i=0, l=nodes.length; i<l; i++) {
zTree.reAsyncChildNodes(nodes[i], type, silent);
if (!silent) zTree.selectNode(nodes[i]);
}
}


$(document).ready(function(){
  $.fn.zTree.init($("#tree"), setting);
});



</script>
</head>


<body>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="tree" class="ztree"></ul>
</div>
<div class="right">

</div>
</div>
</body>
</html>






java代码：


//树模型
public class TreeNode {


   private String id;  
   /**  
    * pid,父节点的id  
    */  
   private String pId;  
   /**  
    * 是否展开  
    */  
   private boolean open;  
   /**  
    * 是否有子节点  
    */  
   private boolean isParent;  
   /**  
    * 节点名称  
    */  
   private String name;  
   /**  
    * 点击实践 
    */  
   private String click;  
   
   /**     
    *   节点所指向的文件路径  
    */     
   private String path;  
 
   public TreeNode(String id, String pid, boolean open, boolean isParent,  
           String name, String click, String path) {  
       this.id = id;  
       this.pId = pid;  
       this.open = open;  
       this.isParent = isParent;  
       this.name = name;  
       this.click = click;  
       this.path = path;  
   }  
 
   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 boolean isOpen() {  
       return open;  
   }  
 
   public void setOpen(boolean open) {  
       this.open = open;  
   }  
 
   public boolean isIsParent() {  
       return isParent;  
   }  
 
   public void setParent(boolean isParent) {  
       this.isParent = isParent;  
   }  
 
   public String getName() {  
       return name;  
   }  
 
   public void setName(String name) {  
       this.name = name;  
   }  
 
   public String getClick() {  
       return click;  
   }  
 
   public void setClick(String click) {  
       this.click = click;  
   }  
   
   
 
   @Override  
   public String toString() {  
       return super.toString();  
   }  
 
   public String getPath() {  
       return path;  
   }  
 
   public void setPath(String path) {  
       this.path = path;  
   }  
}




controller


/**
* 配合前端ztree，获取目录数据
* @param request
* @return
*/
@RequestMapping("/treedata")
@ResponseBody
public String treedata(HttpServletRequest request){
String id = request.getParameter("id");  
String pid = request.getParameter("pid"); 
String open = request.getParameter("open"); 
String isParent = request.getParameter("isParent");
String click = request.getParameter("click");
String path = request.getParameter("path");
        String name = request.getParameter("name");  
        String json = null;
if(null == name){
BuildTreeNodeUtils bu = new BuildTreeNodeUtils(ftpmappingdir);
json = bu.init().toString();
}else{
TreeNode tn = new  TreeNode(id,pid, Boolean.parseBoolean(open),Boolean.parseBoolean(isParent), name,click, path);
BuildTreeNodeUtils bu = new BuildTreeNodeUtils(tn,true);
List<TreeNode> findChildNodes = bu.findChildNodes();
json = FastJsonUtils.toJSONString(findChildNodes);
}
//System.out.println(json);
        return json;
    } 


BuildTreeNodeUtils:
public class BuildTreeNodeUtils {
/**
* 文件列表的工具类
*/
private FileListUtils fUtils;
/**
* 根结点
*/
private TreeNode headNode;
/**
* 父节点
*/
private TreeNode parentNode;
/**
* 文件列表
*/
private List<File> fList;
/**
* 目录列表
*/
private List<File> fDlist;
/**  
* 
*/
private boolean flag;
private String pid;
/**
* 是否有子节点
*/
private boolean isParent;
/**
* 目录树的数据
*/
private StringBuffer treeNodeData;
/**
* 文件路径
*/
private String path;


public BuildTreeNodeUtils(String path) {
this.path = path;
}


public BuildTreeNodeUtils(TreeNode tn, boolean flag) {
if (tn != null) {
fUtils = new FileListUtils(tn.getPath());
fList = fUtils.getfList();
fDlist = fUtils.getdList();
this.flag = flag;
this.pid = tn.getId();
this.parentNode = tn;
}
}


/**
* @description:构造一个根节点的json数据
* @return:StringBuffer
* @return
*/


public StringBuffer init() {
getHeadNode();
treeNodeData = new StringBuffer();
// {id:1, pId:0, name:"[core]", open:true},
treeNodeData.append("[{id:").append(headNode.getId()).append(",pid:").append(headNode.getpId()).append(",open:")
.append(headNode.isOpen()).append(",isParent:").append(headNode.isIsParent()).append(",name:\"")
.append(headNode.getPath().replaceAll("\\\\", "/")).append("\"").append(",click:\"")
.append(headNode.getClick()).append("\"").append(",path:\"")
.append(headNode.getPath().replaceAll("\\\\", "/")).append("\"").append("}]");
return treeNodeData;
}


/**
* @description:获得根节点

* @return:TreeNode
* @return
*/


public TreeNode getHeadNode() {


File ftemp = new File(path);
if (ftemp.isDirectory() && ftemp.listFiles().length > 0) {
headNode = new TreeNode("0", "0", false, true, ftemp.getPath(), "getChildNodes", ftemp.getPath());
} else {
headNode = new TreeNode("0", "0", false, false, ftemp.getPath(), "getChildNodes", ftemp.getPath());
}


return headNode;
}


/**
* @description: 获得某个节点的子节点
* @return:List<TreeNode>
* @return
*/
public List<TreeNode> findChildNodes() {
List<TreeNode> ltList = null;
if (parentNode.isIsParent()) {
ltList = new ArrayList<TreeNode>();
if (flag) {
for (int i = 0; i < fList.size(); i++) {
File file = new File(fList.get(i).getPath());
if (file.exists()) {
if (file.isDirectory()) {
isParent = true;
} else {
isParent = false;
}
}
TreeNode tNode; 
if (isParent) {
tNode = new TreeNode(pid + i, pid, false, true, fList.get(i).getName(), "",fList.get(i).getPath());
} else {
tNode = new TreeNode(pid + i, pid, false, false, fList.get(i).getName(), "",fList.get(i).getPath());
}
ltList.add(tNode);
}
} else {
for (int i = 0; i < fDlist.size(); i++) {
TreeNode tNode;
tNode = new TreeNode(pid + i, pid, false, true, fDlist.get(i).getName(), "",
fDlist.get(i).getPath());
ltList.add(tNode);
}
}
}
return ltList;
}





/**
* @description: 构造子节点的json数据

* @return:StringBuffer
* @return
*/


public StringBuffer getTreeNodeData() {
List<TreeNode> ltList = findChildNodes();
int count = ltList.size();
if (count > 0) {
treeNodeData = new StringBuffer();
treeNodeData.append("[");
for (int i = 0; i < count; i++) {
TreeNode tempNode = ltList.get(i);
treeNodeData.append("{id:").append(tempNode.getId()).append(",pid:").append(tempNode.getpId())
.append(",open:").append(tempNode.isOpen()).append(",isParent:").append(tempNode.isIsParent())
.append(",name:").append("\"").append(tempNode.getName().replaceAll("\\\\", "/")).append("\"")
.append(",click:\"").append(tempNode.getClick()).append("\"").append(",path:").append("\"")
.append(tempNode.getPath().replaceAll("\\\\", "/")).append("\"").append("}");
if (i == count - 1) {
treeNodeData.append("]");
} else {
treeNodeData.append(",");
}
}
}
return treeNodeData;
}






public String getFileName() {
return parentNode.getName();
}


public FileListUtils getfUtils() {
return fUtils;
}


public TreeNode getParentNode() {
return parentNode;
}


public List<File> getfList() {
return fList;
}


public List<File> getfDlist() {
return fDlist;
}


public boolean isFlag() {
return flag;
}


public String getPid() {
return pid;
}


public boolean isParent() {
return isParent;
}


public String getPath() {
return path;
}


public void setPath(String path) {
this.path = path;
}
}


FileListUtils:
public class FileListUtils {


private String path = "";


public FileListUtils(String path) {
this.path = path;
}


/**
* 所有文件列表
* 
* @return
*/
public List<File> getfList() {
List<File> fileList = new ArrayList<File>();
File file = new File(path);
File[] tempList = file.listFiles();
for (int i = 0; i < tempList.length; i++) {
//if (tempList[i].isFile()) {
//System.out.println("文件：" + tempList[i]);
fileList.add(tempList[i]);
//}
}
return fileList;
}


/**
* 文件夹列表
* 
* @return
*/
public List<File> getdList() {
List<File> fileList = new ArrayList<File>();
File file = new File(path);
File[] tempList = file.listFiles();
for (int i = 0; i < tempList.length; i++) {
if (tempList[i].isDirectory()) {
//System.out.println("文件夹：" + tempList[i]);
fileList.add(tempList[i]);
}
}
return fileList;
}


}
DevinW3
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ztree 指定节点清空_ztree取消节点操作
weixin_39633054的博客
12-31 339
jQuery取消checkbox选中状态，一般是这样解决的jQuery取消checkbox选中状态function box() {$("#box").attr("checked", false);}但是在Ztree的组件里面，我们看到的勾选框并不是checkbox完成，而是使用了图片精灵，选中和未选中的状态里面是一张背景图片里面不同的定位~主要代码zTreeObj.checkNode(zTreeO...
Ztree的设计结构与扩展
Zhongxiucheng的专栏
07-06 1398
Ztree是一个比较优秀的树形展示组件,对于这个组件核心代码只有2000行不到,但是其功能却十分的强大,而且这个组件支持插件方式的扩展支持也是很不错的, 这可以让程序员围绕树的结构开发出更多的功能,比如check,edit两个功能就是以插件的方式提供,Ztree组件的代码整体结构有自身的一些特点,了解这些特征可以 使我们更好的使用这个组件. 在代码的内部主要分为以下几个部分: 1.常量定义
ztree模糊查询，效率高
weixin_43862832的博客
09-01 1226
一般ztree模糊查询会使用到getNodesByParamFuzzy()这个方法，但是当数据量大的时候，会显得卡顿，所以我们不用这个方法 我使用的是fuzzySearch()方法 版本必须高于ztree v3.5.19.1及以上 ztree v3.5.19.1及以上,使用到getPath()方法 ztree.exhide扩展,使用到hideNode()方法 function fuzzySearch(zTreeId, searchField, isHighLight, isExpand){ var
zTree使用心得
BMLovey的博客
02-28 5010
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="<%=webpath%>/js/zTree/css/zTreeStyle/zTreeStyle.css
ztree树构造的一些解决方案,getNodes()的作用
偶是一只小小鸟~
02-01 7406
getNodes 概述[ 依赖 jquery.ztree.core 核心 js ] 获取 zTree 的全部节点数据 请通过 zTree 对象执行此方法。 Function 参数说明 返回值Array(JSON) 全部节点数据 1、Array 仅仅是根节点的集合（默认情况子节点都处于 children 属性下）；
zTree异步加载树形菜单
Godruoyi
11-06 7417
zTree异步加载树形菜单ztree是依赖于jquery实现的多功能树插件， 也是目前做菜单管理、权限管理用的较多的前段插件之一。
利用ztree js插件，产生一个异步的文件目录树
yehui18sui的专栏
04-24 2281
ztree这个js插件大家可以网上参考。这里不多讲：只将例子； 1.treeNode的model类 /** * @FILE:TreeNode.java * @AUTHOR:yehui * @DATE:2013-3-21 上午10:23:58 **/ package jp.co.tsh.model; import jp.co.tsh.common.BaseModel; /****
zTree异步加载展开第一级节点的实现方法
08-29
zTree异步加载展开第一级节点的实现方法 zTree异步加载展开第一级节点的实现方法是指在使用zTree插件时，如何实现异步加载展开第一级节点的功能。实现该功能需要在setting中的callback中添加onAsyncSuccess回调函数...
java实现ztree异步加载
05-13
首先，我们需要理解ZTree异步加载的基本原理。ZTree通过Ajax请求向服务器获取数据，服务器端（这里为Java）处理请求并返回JSON格式的节点数据。ZTree接收到这些数据后动态构建或更新树形结构。这个过程涉及到的主要...
JQuery ztree 异步加载实例讲解
10-22
总结来说，JQuery zTree的异步加载功能允许我们在需要时动态加载树节点，提高网页性能。通过配置异步加载参数和编写数据过滤函数，我们可以灵活地控制数据的加载与处理，从而实现高效且用户体验良好的树形展示。
zTree异步加载Demo
10-20
【zTree异步加载Demo】是一个基于SpringMVC框架和MySQL数据库实现的示例，它展示了如何使用zTree这一流行的JavaScript树形插件进行异步数据加载。zTree是一款功能强大的jQuery插件，广泛用于构建多级目录结构，如...
ztree异步加载demo（有说明文档）
03-13
【标题】"ztree异步加载demo（有说明文档）" 涉及到的知识点主要围绕着ZTree，这是一个非常流行的JavaScript组件，主要用于构建树形结构的界面，尤其适用于网站导航、文件目录管理和组织结构展示等场景。异步加载是...
7. zTree的配置和使用流程
大头鱼
08-08 622
zTree的配置和使用流程
ZTree获取根节点
我的技术总结
08-20 1万+
function getRoot() { var treeObj = $.fn.zTree.getZTreeObj("tree-div"); //返回一个根节点 var node = treeObj.getNodesByFilter(function (node) { return node.level == 0 }, true); } function getRoots()
zTree常用操作
qq_41829337的博客
07-21 928
zTree常用操作
超级详细的Ztree详解
热门推荐
qq3892997的博客
05-14 4万+
超级详细的Ztree详解1、添加样式、js &lt;link rel="stylesheet" href="${ctx}/hollybeacon/resources/plugins/zTree_v3/css/demo.css" type="text/css"&gt; &lt;link rel="stylesheet" href="${ctx}/hollybeacon/resources/plu
easyUI 函数加载目录树
Sun_xiangyan的博客
06-25 306
function InitTree1() { $("#tt").tree({ data: [{ id: "0", text: "地图文档", children: [{ id: "01", text: "基础地理", ...
ztree添加节点数据初始化事件
三思而后行
12-12 959
工作中用到分类选择树型下拉框，只允许单选叶子节点上的分类。如此需要使用把isParent=true的node的nocheck设置成true。   可以在ztree的jquery.ztree.core-3.5.js的appendNodes中增加一个回调函数接口setting.callback.afterInitNode：   appendNodes: function(setting, ...
判断input checkbox 是否checked
自由的大月
09-28 5608
alert($(this).is(":checked"));
ztree插件异步加载 使用RESTEasy报错 Only resource methods using @FormParam will work as expected. Resource me...
最新发布
05-19
这个错误是因为 RESTEasy 只支持使用 @FormParam 注解的资源方法，而异步加载 ztree 插件的资源方法可能不是使用 @FormParam 注解的。在这种情况下，你可以尝试使用 @QueryParam 注解来代替 @FormParam 注解。如果还是不行，你可以考虑使用其他的 REST 框架或者使用其他的异步加载方案来解决这个问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值