`
坏我一锅粥
  • 浏览: 61229 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

zTree模糊搜索

 
阅读更多
工作需要,所以做了一个比较方便的搜索功能;
1、功能实现都是基于zTree的API;
2、如有更好的建议,欢迎拍我;

/**
	 * 展开树
	 * @param treeId  
	 */
    function expand_ztree(treeId){
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        treeObj.expandAll(true);
    }
    
    /**
	 * 收起树:只展开根节点下的一级节点
	 * @param treeId
	 */
    function close_ztree(treeId){
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        var nodes = treeObj.transformToArray(treeObj.getNodes());
        var nodeLength = nodes.length;
        for (var i = 0; i < nodeLength; i++) {
            if (nodes[i].id == '0') {
                //根节点:展开
                treeObj.expandNode(nodes[i], true, true, false);
            } else {
                //非根节点:收起
                treeObj.expandNode(nodes[i], false, true, false);
            }
        }
    }
    
    /**
     * 搜索树,高亮显示并展示【模糊匹配搜索条件的节点s】
     * @param treeId
	 * @param searchConditionId 文本框的id
     */
	function search_ztree(treeId, searchConditionId){
		searchByFlag_ztree(treeId, searchConditionId, "");
	}
    
    /**
     * 搜索树,高亮显示并展示【模糊匹配搜索条件的节点s】
     * @param treeId
     * @param searchConditionId		搜索条件Id
     * @param flag 					需要高亮显示的节点标识
     */
	function searchByFlag_ztree(treeId, searchConditionId, flag){
		//<1>.搜索条件
		var searchCondition = $('#' + searchConditionId).val();
		//<2>.得到模糊匹配搜索条件的节点数组集合
		var highlightNodes = new Array();
		if (searchCondition != "") {
			var treeObj = $.fn.zTree.getZTreeObj(treeId);
			highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
		}
		//<3>.高亮显示并展示【指定节点s】
		highlightAndExpand_ztree(treeId, highlightNodes, flag);
	}
	
	/**
	 * 高亮显示并展示【指定节点s】
	 * @param treeId
	 * @param highlightNodes 需要高亮显示的节点数组
	 * @param flag			 需要高亮显示的节点标识
	 */
	function highlightAndExpand_ztree(treeId, highlightNodes, flag){
		var treeObj = $.fn.zTree.getZTreeObj(treeId);
		//<1>. 先把全部节点更新为普通样式
		var treeNodes = treeObj.transformToArray(treeObj.getNodes());
		for (var i = 0; i < treeNodes.length; i++) {
			treeNodes[i].highlight = false;
			treeObj.updateNode(treeNodes[i]);
		}
		//<2>.收起树, 只展开根节点下的一级节点
		close_ztree(treeId);
		//<3>.把指定节点的样式更新为高亮显示,并展开
		if (highlightNodes != null) {
			for (var i = 0; i < highlightNodes.length; i++) {
				if (flag != null && flag != "") {
					if (highlightNodes[i].flag == flag) {
						//高亮显示节点,并展开
						highlightNodes[i].highlight = true;
						treeObj.updateNode(highlightNodes[i]);
						//高亮显示节点的父节点的父节点....直到根节点,并展示
						var parentNode = highlightNodes[i].getParentNode();
						var parentNodes = getParentNodes_ztree(treeId, parentNode);
						treeObj.expandNode(parentNodes, true, false, true);
						treeObj.expandNode(parentNode, true, false, true);
					}
				} else {
					//高亮显示节点,并展开
					highlightNodes[i].highlight = true;
					treeObj.updateNode(highlightNodes[i]);
					//高亮显示节点的父节点的父节点....直到根节点,并展示
					var parentNode = highlightNodes[i].getParentNode();
					var parentNodes = getParentNodes_ztree(treeId, parentNode);
					treeObj.expandNode(parentNodes, true, false, true);
					treeObj.expandNode(parentNode, true, false, true);
				}
			}
		}
	}
	
	/**
	 * 递归得到指定节点的父节点的父节点....直到根节点
	 */
	function getParentNodes_ztree(treeId, node){
		if (node != null) {
			var treeObj = $.fn.zTree.getZTreeObj(treeId);
			var parentNode = node.getParentNode();
			return getParentNodes_ztree(treeId, parentNode);
		} else {
			return node;
		}
	}
	
	/**
	 * 设置树节点字体样式
	 */
	function setFontCss_ztree(treeId, treeNode) {
		if (treeNode.id == 0) {
			//根节点
			return {color:"#333", "font-weight":"bold"};
		} else if (treeNode.isParent == false){
			//叶子节点
			return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#660099", "font-weight":"normal"};
		} else {
			//父节点
			return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
		}
	}

	//==============HTML==============
	<!--搜索框-->
	<div class="padd" style="padding-bottom: 0px;">
        <div class="input-append row-fluid" style="margin-bottom: 0px;">
			<input id="search_condition" type="text" placeholder="请输入搜索条件" class="span8" style="font-size:12px"/>
			<button type="button" class="btn btn-info" onclick="search_ztree('dep_tree', 'search_condition')">搜索</button>
        </div>
    </div>
	<!--树-->
    <ul id="dep_tree" class="ztree"></ul>  



  • 大小: 3.7 KB
分享到:
评论

相关推荐

    ztree模糊搜索demo

    本篇将详细讲解"ZTree模糊搜索demo"及其核心知识点。 首先,"模糊搜索"是用户输入关键字时,系统能够快速匹配并显示与关键字相关的数据项的技术。在ZTree中,实现模糊搜索功能可以极大地提升用户体验,让用户能够...

    SpringMvc+Mybatis+Ztree模糊搜索+异步

    在本项目中,我们主要探讨的是如何利用SpringMVC、Mybatis和Ztree技术来构建一个具有模糊搜索和异步加载功能的Web应用。这个应用的实现包括了后端服务的搭建、数据库的设计以及前端界面的展示。下面将对这些关键点...

    jquery ztree实现模糊查询功能,给树上的结点添加过滤器

    在处理大量数据并需要提供用户友好的搜索功能时,ZTree的模糊查询功能就显得尤为重要。本篇文章将深入探讨如何利用jQuery ZTree实现模糊查询功能,并对树上的节点添加过滤器。 首先,我们要理解jQuery ZTree的核心...

    zTree模糊查询Demo

    在本案例中,我们将深入探讨"zTree模糊查询Demo",它实现了动态搜索功能,可以高效地帮助用户查找并高亮显示符合搜索条件的节点,同时隐藏那些不匹配的节点。 模糊查询是用户输入关键词后,系统能够返回包含这些...

    jquery ztree实现模糊搜索功能

    在本文中,我们将深入探讨如何使用jQuery库中的ZTree插件实现模糊搜索功能。ZTree是一个功能丰富的jQuery树形插件,它提供了多种操作和显示树形数据的方式,包括搜索功能。模糊搜索允许用户在输入部分关键词时找到...

    ztree 带搜索

    ztree根据关键字模糊搜索 根据关键字显示叶子节点 

    ztree模糊查询

    **ZTree 模糊查询详解** ZTree 是一个基于 jQuery 的灵活可配置的树插件,广泛应用于网页端的数据展示和交互。它不仅支持传统的树结构数据,还提供了丰富的功能,如节点操作、异步加载、多选模式、拖拽等。在实际...

    zTreeFuzzySearch(带搜索的树目录功能)

    zTreeFuzzySearch是一款基于zTree插件实现的带有模糊搜索功能的树目录组件,它借鉴了亚马逊中文网图书板块的设计,使得用户能够在庞大的目录结构中快速、准确地找到所需的信息。这一功能在项目开发中具有很高的实用...

    带搜索的ztree 结果高亮

    在本案例中,我们关注的是"带搜索的ztree 结果高亮"这一功能,这是一项增强用户交互体验的重要特性,使得用户能够快速定位和筛选树形数据。 首先,我们要理解ztree的基本结构和工作原理。ZTree通过JSON数据格式来...

    Ztree利用getNodesByFilter进行js搜索 搜索父级隐藏

    "Ztree利用getNodesByFilter进行js搜索 搜索父级隐藏"这一主题涉及到在ZTree中实现高级搜索功能,特别是当需要隐藏不符合条件的父级节点时。通常,ZTree展示的数据结构是一个层次化的树形结构,每个节点可能包含子...

    带搜索的Ztree

    这种搜索可能包括对节点文本、ID或其他自定义属性的模糊匹配。搜索结果通常会高亮显示,以便用户一眼就能识别出目标节点。同时,ZTree还支持自动定位,意味着一旦找到匹配项,它会自动滚动到相应节点,确保用户能够...

    jquery zTree异步加载、模糊搜索简单实例分享

    在本文中,我们将深入探讨jQuery zTree插件的两个核心功能:异步加载和模糊搜索。zTree是一款广泛使用的JavaScript树形控件,它能够帮助开发者构建动态、交互性强的树结构界面。以下是对这两个功能的详细解释: 一...

    改造的ztree菜单控件 可以搜索菜单

    这通常涉及对ZTree的数据模型进行处理,以及对搜索逻辑的实现,可能包括模糊匹配、精确匹配等多种策略。 在描述中提到的"grant.jsp",可能是展示这个改造后ZTree效果的页面。开发者可以通过访问这个页面来查看和...

Global site tag (gtag.js) - Google Analytics