java遍历文件目录，使用ztree.js以树形结构展示并支持搜索功能

绝地灬酷狼 2023-06-22 13:45 1阅读 0赞

**前端代码**引用js

<link rel="stylesheet" href="${scriptsPath}/zTree/css/zTreeStyle/zTreeStyle.css" />
    <script type="text/javascript" src="${scriptsPath}/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="${scriptsPath}/zTree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="${scriptsPath}/zTree/js/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript" src="${scriptsPath}/zTree/js/jquery.ztree.exedit-3.5.js"></script>
    <script type="text/javascript" src="${scriptsPath}/zTree/js/jquery.ztree.exhide-3.5.js"></script>
    <script type="text/javascript" src="${scriptsPath}/zTree/js/jquery.ztree.exhide-3.5.js"></script> 
    <script type="text/javascript">
    	 var basePath1 = '${basePath }';
    	 var zTree;
    	 var isInitTree =false;
    	 var setting = {
    	 		view : {
    	 			showIcon : false,
    	 			dblClickExpand : true,//双击节点时，是否自动展开父节点的标识
    	 			showLine : false,//是否显示节点之间的连线
    	 			fontCss : {
    	 				'color' : 'black',
    	 				'font-weight' : ''
    	 			},//字体样式函数
    	 			selectedMulti : false
    	 		},
    	 		check : {
    	 			enable: false,
    	 		},
    	 		callback: {
    	 	        onClick : zTreeOnClick,
    	 	    },
    	 		view: {
                    // 使用ztree自定义高亮时，一定要设置fontCss,setHighlight是自定义高亮方法
                    //fontCss: setHighlight,
                    nameIsHTML: true, //允许name支持html                
                    selectedMulti: false
                },
                edit: {
                    enable: false,
                    editNameSelectAll: false
                },
    	 		data: {
    	 			simpleData: {
    	 				enable:true,
    	 				idKey: "id",
    	 				pIdKey: "pId"
    	 			},key: {
    	 				name: "text"
    	 			}
    	 		}
    	 	}
    	 	setting.check.chkboxType = {
    	 		"Y" : "ps",
    	 		"N" : "ps"
    	 	};
    	 	//父子节点关联
    	 	function zTreeOnCheck(event, treeId, treeNode) {
    	 		refreshLayers();
    	 		clearCheckedOldNodes();
    	 	};
    	 	var setting1 = {};//设置ztree相关的属性
    		 $(document).ready(function (){
    			 var treeNodes;
    			$.ajax({
    				async : false,//是否异步
    				cache : false,//是否使用缓存
    				type : 'GET',//请求方式：post
    				dataType : 'json',//数据传输格式：json
    				url : '${basePath}/ajax_template/websiteBrowseDirectory_template.action?websiteId='+'${websiteId}'+'&websiteCode='+'${websiteCode}',
    				success : function(data) {
    					treeNodes = data
    				}
    			});
    			 //初始化ztree三个参数分别是(jQuery对象,ztree设置,树节点数据)
    	        var treeObj = $.fn.zTree.init($("#book"), setting, treeNodes); 
    	        treeObj.expandAll(true);
    
    		 fuzzySearch('book','#keyword',null,true); //初始化模糊搜索方法
    		}); 
    		 function fuzzySearch(zTreeId, searchField, isHighLight, isExpand){
    			    var zTreeObj = $.fn.zTree.getZTreeObj(zTreeId);//获取树对象
    			    if(!zTreeObj){
    			        alter("获取树对象失败");
    			    }
    			    var nameKey = zTreeObj.setting.data.key.name; //获取name属性的key
    			    isHighLight = isHighLight===false?false:true;//默认为高亮
    			    isExpand = isExpand?true:false;
    			    zTreeObj.setting.view.nameIsHTML = isHighLight;//允许在节点名称中使用html,用于处理高亮
    			    
    			    var metaChar = '[\\[\\]\\\\\^\\$\\.\\|\\?\\*\\+\\(\\)]'; //js正则表达式元字符集
    			    var rexMeta = new RegExp(metaChar, 'gi');//匹配元字符的正则表达式
    			    
    			    // 过滤ztree显示数据
    			    function ztreeFilter(zTreeObj,_keywords,callBackFunc) {
    			        if(!_keywords){
    			            _keywords =''; //如果为空，赋值空字符串
    			        }
    			        
    			        // 查找符合条件的叶子节点
    			        function filterFunc(node) {
    			            if(node && node.oldname && node.oldname.length>0){
    			                node[nameKey] = node.oldname; //如果存在原始名称则恢复原始名称
    			            }
    			            //node.highlight = false; //取消高亮
    			            zTreeObj.updateNode(node); //更新节点让之前对节点所做的修改生效
    			            if (_keywords.length == 0) { 
    			                //如果关键字为空,返回true,表示每个节点都显示
    			                zTreeObj.showNode(node);
    			                zTreeObj.expandNode(node,isExpand); //关键字为空时是否展开节点
    			                return true;
    			            }
    			            //节点名称和关键字都用toLowerCase()做小写处理
    			            if (node[nameKey] && node[nameKey].toLowerCase().indexOf(_keywords.toLowerCase())!=-1) {
    			                if(isHighLight){ //如果高亮，对文字进行高亮处理
    			                    //创建一个新变量newKeywords,不影响_keywords在下一个节点使用
    			                    //对_keywords中的元字符进行处理,否则无法在replace中使用RegExp
    			                    var newKeywords = _keywords.replace(rexMeta,function(matchStr){
    			                        //对元字符做转义处理
    			                        return '\\' + matchStr;
    			                        
    			                    });
    			                    node.oldname = node[nameKey]; //缓存原有名称用于恢复
    			                    //为处理过元字符的_keywords创建正则表达式,全局且不分大小写
    			                    var rexGlobal = new RegExp(newKeywords, 'gi');//'g'代表全局匹配,'i'代表不区分大小写
    			                    //无法直接使用replace(/substr/g,replacement)方法,所以使用RegExp
    			                    node[nameKey] = node.oldname.replace(rexGlobal, function(originalText){
    			                        //将所有匹配的子串加上高亮效果
    			                        var highLightText =
    			                            '<span style="color: whitesmoke;background-color: darkred;">'
    			                            + originalText
    			                            +'</span>';
    			                        return  highLightText;                  
    			                    });
    			                    zTreeObj.updateNode(node); //update让更名和高亮生效
    			                }
    			                zTreeObj.showNode(node);//显示符合条件的节点
    			                return true; //带有关键字的节点不隐藏
    			            }
    			            
    			            zTreeObj.hideNode(node); // 隐藏不符合要求的节点
    			            return false; //不符合返回false
    			        }
    			        var nodesShow = zTreeObj.getNodesByFilter(filterFunc); //获取匹配关键字的节点
    			        processShowNodes(nodesShow, _keywords);//对获取的节点进行二次处理
    			    }
    			    
    			    /**
    			     * 对符合条件的节点做二次处理
    			     */
    			    function processShowNodes(nodesShow,_keywords){
    			        if(nodesShow && nodesShow.length>0){
    			            //关键字不为空时对关键字节点的祖先节点进行二次处理
    			            if(_keywords.length>0){ 
    			                $.each(nodesShow, function(n,obj){
    			                   var pathOfOne= isParentNode(obj);
    			                });             
    			            }else{ //关键字为空则显示所有节点, 此时展开根节点
    			                var rootNodes = zTreeObj.getNodesByParam('level','0');//获得所有根节点
    			                $.each(rootNodes,function(n,obj){
    			                    zTreeObj.expandNode(obj,true); //展开所有根节点
    			                });
    			            }
    			        }
    			    }
    			    
    			    function isParentNode(obj){
    			    	var pathOfOne = obj.getParentNode()
    			    	if(pathOfOne != null){
    			    		zTreeObj.showNode(pathOfOne); //显示节点
                            zTreeObj.expandNode(pathOfOne,true); //展开节点
    			    		isParentNode(pathOfOne);
    			    	}else{
    			    		return pathOfOne;
    			    	}
    			    }
    			    //监听关键字input输入框文字变化事件
    			    $(searchField).bind('input propertychange', function() {
    			        var _keywords = $(this).val();
    			        searchNodeLazy(_keywords); //调用延时处理
    			    });
    
    			    var timeoutId = null;
    			    // 有输入后定时执行一次，如果上次的输入还没有被执行，那么就取消上一次的执行
    			    function searchNodeLazy(_keywords) {
    			        if (timeoutId) { //如果不为空,结束任务
    			            clearTimeout(timeoutId);
    			        }
    			        timeoutId = setTimeout(function() {
    			            ztreeFilter(zTreeObj,_keywords);    //延时执行筛选方法
    			            $(searchField).focus();//输入框重新获取焦点
    			        }, 500);
    			    }
    			}
    		// 单击事件
    		    function zTreeOnClick(event, treeId, treeNode) {
    		    	var url = treeNode.URL;
    		    	//不是绝对路径,则在前面添加fullPath
    		    	if(url.indexOf("http://") == -1 && url.indexOf("https://") == -1){
    		    		url = fullPath + url;
    		    	}
    		    	if(treeNode.URL){
    		    		var elframe1 = parent.document.getElementById('mainFrame');
    		    		if(typeof isCollection != "undefined" && isCollection){
    		    			if(treeNode.folderIcon == "collection.png"){
    		    				elframe1.src=url;
    		    			}
    		    		}else{
    		    			elframe1.src=url;
    		    		}
    		    	}
    		    }   
    </script>
    
    	<div class="TreePanel">
    		<input id="keyword" type="search" placeHolder="搜索关键字"/>
    		<ul id="book" class="ztree"></ul>
    	</div>
    	</body>

**效果图**  
![以demo为根节点的目录展示树][demo]  
![搜索效果图][20191216154858559.png]  
var pathOfOne = obj.getPath();//向上追溯,获取节点的所有祖先节点(包括自己);  
其实节点二次处理的时候可以使用ztree提供的api接口getPath,但是这个接口现在并不能使用。这个只是前端代码，后台遍历目录组装json的代码，待整理后再补充。

[demo]: https://img-blog.csdnimg.cn/20191216154820521.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaW9mY2hhbw==,size_16,color_FFFFFF,t_70
[20191216154858559.png]: https://img-blog.csdnimg.cn/20191216154858559.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关使用Java 8 中的 Stream 遍历树形结构

1 前言可能平常会遇到一些需求，比如构建菜单，构建树形结构，数据库一般就使用父id来表示，为了降低数据库的查询压力，我们可以使用Java8中的Stream流一次性把数据

旧城等待，/ 2023年10月14日 17:51/ 0 赞/ 13 阅读

相关 java遍历文件目录，使用ztree.js以树形结构展示并支持搜索功能

前端代码引用js <link rel="stylesheet" href="${scriptsPath}/zTree/css/zTreeStyle/zTreeStyl

绝地灬酷狼/ 2023年06月22日 13:45/ 0 赞/ 2 阅读

相关算法：Java通过队列遍历目录（树形结构）

思路：初始化一个队列和动态数组\[用来返回结果\] 将传参入队列如果队列不为空：取出队列第一个元素，判断该元素是否是目录

小灰灰/ 2023年02月16日 04:28/ 0 赞/ 18 阅读

相关 linux--tree命令以树形结构显示文件目录结构

tree命令可以以树形结构显示文件目录结构，它非常适合于我们给别人介绍我们的文件目录的组成框架，同时该命令使用适当的参数也可以将命令结果输出到文本文件中。注：此处以ubun

﹏ヽ暗。殇╰゛Y/ 2022年09月25日 14:24/ 0 赞/ 366 阅读

相关 java遍历文件夹下所有文件，并以树形展示

package com.edu1.test; import java.io.File; class FileSystem {

雨点打透心脏的1/2处/ 2022年09月07日 00:08/ 0 赞/ 317 阅读

相关打印一个目录，并以树形结构显示

import java.io.; import java.util.; public class VisualDirectory {

深碍√TFBOYSˉ_/ 2022年08月27日 10:51/ 0 赞/ 247 阅读

相关 java实现遍历文件目录，并在控制台以树形结构展示搜索出来的文件

最近学会了一个用java遍历文件目录，并且在控制台以树形结构的方式展开搜索的文件，怕忘记了，所以记录下来，废话不再多说，直接上代码！具体方法，代码中都有相应的注释了，这里就不在

傷城~/ 2022年06月18日 11:36/ 0 赞/ 557 阅读

相关 java 递归遍历树形结构

好记性不如烂笔头，记录下。 //菜单树形结构 public JSONArray treeMenuList(JSONArray men

川长思鸟来/ 2022年06月13日 10:58/ 0 赞/ 529 阅读

相关 java代码深层遍历文件，并打印文件目录结构

java代码深层遍历文件，并打印文件目录结构 import java.io.File; public class DeepSearchDir {

Bertha 。/ 2022年04月02日 05:58/ 0 赞/ 322 阅读

相关 python3 文件内容搜索文件名搜索目录遍历

目录目录遍历文件名搜索文件内容搜索关键字搜索整合完整代码 -------------------- 目录遍历首先我们来看如何实现目录遍历目录

柔光的暖阳◎/ 2021年09月07日 21:30/ 0 赞/ 522 阅读