zTree -- jQuery 树插件使用

最新推荐文章于 2024-04-26 15:21:07 发布

辰小白

最新推荐文章于 2024-04-26 15:21:07 发布

阅读量783

点赞数

分类专栏： [前端]

本文链接：https://blog.csdn.net/qq493820798/article/details/86596794

版权

[前端] 专栏收录该内容

38 篇文章 5 订阅

订阅专栏

api地址：http://www.treejs.cn/v3/main.php#_zTreeInfo

1.首先下载zTree -- jQuery 树插件

2.简单的使用

加载效果（简单使用，可以更改更好看的样式，具体看api）

jsp页面代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript" src="../jQuery/jquery.min.js"></script>
    <script type="text/javascript" src="../ztree/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="../ztree/jquery.ztree.exhide.js"></script>
    <script type="text/javascript" src="../ztree/fuzzySearch.js"></script>
    <script type="text/javascript" src="data.js"></script>
	<link rel="stylesheet" type="text/css" href="../ztree/zTreeStyle.css">
  </head>
  
  <body>
  	<script type="text/javascript">
  	
var zTreeObj;
$(function() {
	//初始化ztree树
	initThisZtree();
	
	// zTreeId ztree对象的id,不需要#
    // searchField 输入框选择器
    // isHighLight 是否高亮,默认高亮,传入false禁用
    // isExpand 是否展开,默认合拢,传入true展开
    fuzzySearch('trees','#search',true,true); //初始化模糊搜索方法
});


function initThisZtree(){
	var setting = { 
		data: {
			simpleData: {
				enable: true,
				idKey: "id",
				pIdKey: "pId",
				rootPId: 0
			}
		},
		view: {
			showIcon: true,  //true / false 分别表示 显示 / 隐藏 图标
			showLine: false,  //设置 zTree 不显示节点之间的连线
			fontCss : {color:"#ff0011", background:"#ffffff"} //个性化文字样式
		},
		callback: {
			beforeClick: zTreeBeforeClick,  //用于捕获单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作
			onClick: zTreeOnClick  //用于捕获节点被点击的事件回调函数   如果设置了 setting.callback.beforeClick 方法，且返回 false，将无法触发 onClick 事件回调函数。
		}
		
    };
	
	zTreeObj = $.fn.zTree.init($("#trees"), setting, treeNodes);
	zTreeObj.expandAll(true);//表示 展开 全部节点
}

	    
//用于捕获单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作
function zTreeBeforeClick(treeId, treeNode, clickFlag){
	console.log("zTreeBeforeClick");
	return true;
}	    

//用于捕获节点被点击的事件回调函数
//如果设置了 setting.callback.beforeClick 方法，且返回 false，将无法触发 onClick 事件回调函数。
function zTreeOnClick(event,treeId,treeNode){
	console.log("zTreeOnClick");
}

  	</script>
        <input id="search" type="text" class="form-control" placeholder="请输入查询关键字" style="width: 500px;" />
    	<ul id="trees" class="ztree" style="width:500px;height: 800px; overflow:auto;"></ul>
  </body>
</html>

模拟数据js文件-data.js

var treeNodes = [{
    "name": "图书",
    "pId": "",
    "id": "0"
}, {
    "name": "其他1",
    "pId": "",
    "id": "1"
},{
    "name": "其他2",
    "pId": "",
    "id": "2"
},{
    "name": "其他3",
    "pId": "",
    "id": "3"
},
{
    "name": "测试js正则元字符:[]\\^$.|?*+()",
    "pId": "0",
    "id": "06"
},{
    "name": "测试其他字符:{}<>'\"~`!@#%&-;:/,",
    "pId": "0",
    "id": "07"
},{
    "name": "测试大小写同节点: 大写ABDEFGHINQRT,小写abdefghinqrt",
    "pId": "0",
    "id": "08"
},{
    "name": "测试大写ABDEFGHINQRT",
    "pId": "0",
    "id": "09"
},{
    "name": "测试小写abdefghinqrt",
    "pId": "0",
    "id": "10"
},{
    "name": "文学",
    "pId": "0",
    "id": "00"
}, {
    "name": "历史",
    "pId": "0",
    "id": "01"
}, {
    "name": "法律",
    "pId": "0",
    "id": "02"
}, {
    "name": "辞典与工具书",
    "pId": "0",
    "id": "03"
}, {
    "name": "科学与自然",
    "pId": "0",
    "id": "04"
},{
    "name": "自然科学总论",
    "pId": "04",
    "id": "040"
},{
    "name": "数学",
    "pId": "04",
    "id": "041"
},{
    "name": "物理",
    "pId": "04",
    "id": "042"
},{
    "name": "天文学 地球科学",
    "pId": "04",
    "id": "043"
}, {
    "name": "计算机与互联网",
    "pId": "0",
    "id": "05"
}, {
    "name": "编程与开发",
    "pId": "05",
    "id": "050"
}, {
    "name": "编程语言与工具",
    "pId": "050",
    "id": "0500"
}, {
    "name": "C & C++",
    "pId": "0500",
    "id": "05000"
},{
    "name": "JAVA",
    "pId": "0500",
    "id": "05001"
},{
    "name": "Python",
    "pId": "0500",
    "id": "05002"
},{
    "name": "Python编程 从入门到实践",
    "pId": "05002",
    "id": "050020"
},{
    "name": "Python编程快速上手 让繁琐工作自动化",
    "pId": "05002",
    "id": "050021"
}, {
    "name": "算法与数据结构",
    "pId": "050",
    "id": "0501"
}, {
    "name": "编译原理和编译器",
    "pId": "050",
    "id": "0502"
}, {
    "name": "操作系统",
    "pId": "05",
    "id": "051"
}, {
    "name": "数据库",
    "pId": "05",
    "id": "052"
}, {
    "name": "计算机科学理论",
    "pId": "05",
    "id": "053"
}, {
    "name": "云计算与大数据",
    "pId": "05",
    "id": "054"
}];

模糊查询js文件--fuzzySearch.js

/**
 * 
 * @param zTreeId ztree对象的id,不需要#
 * @param searchField 输入框选择器
 * @param isHighLight 是否高亮,默认高亮,传入false禁用
 * @param isExpand 是否展开,默认合拢,传入true展开
 * @returns
 */ 
 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;//除直接输入false的情况外,都默认为高亮
    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 = obj.getPath();//向上追溯,获取节点的所有祖先节点(包括自己)
                    if(pathOfOne && pathOfOne.length>0){
                        // i < pathOfOne.length-1, 对节点本身不再操作
                        for(var i=0;i<pathOfOne.length-1;i++){
                            zTreeObj.showNode(pathOfOne[i]); //显示节点
                            zTreeObj.expandNode(pathOfOne[i],true); //展开节点
                        }
                    }
                });             
            }else{ //关键字为空则显示所有节点, 此时展开根节点
                var rootNodes = zTreeObj.getNodesByParam('level','0');//获得所有根节点
                $.each(rootNodes,function(n,obj){
                    zTreeObj.expandNode(obj,true); //展开所有根节点
                });
            }
        }
    }
    
    //监听关键字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);
    }
}

辰小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
zTree -- jQuery 树插件使用

api地址：http://www.treejs.cn/v3/main.php#_zTreeInfo1.首先下载zTree -- jQuery 树插件2.简单的使用加载效果（简单使用，可以更改更好看的样式，具体看api） jsp页面代码&lt;%@ page language="java" import="java.util.*" pageEncoding="u...
复制链接

扫一扫