工作需要,所以做了一个比较方便的搜索功能;
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中,实现模糊搜索功能可以极大地提升用户体验,让用户能够...
在本项目中,我们主要探讨的是如何利用SpringMVC、Mybatis和Ztree技术来构建一个具有模糊搜索和异步加载功能的Web应用。这个应用的实现包括了后端服务的搭建、数据库的设计以及前端界面的展示。下面将对这些关键点...
在处理大量数据并需要提供用户友好的搜索功能时,ZTree的模糊查询功能就显得尤为重要。本篇文章将深入探讨如何利用jQuery ZTree实现模糊查询功能,并对树上的节点添加过滤器。 首先,我们要理解jQuery ZTree的核心...
在本案例中,我们将深入探讨"zTree模糊查询Demo",它实现了动态搜索功能,可以高效地帮助用户查找并高亮显示符合搜索条件的节点,同时隐藏那些不匹配的节点。 模糊查询是用户输入关键词后,系统能够返回包含这些...
在本文中,我们将深入探讨如何使用jQuery库中的ZTree插件实现模糊搜索功能。ZTree是一个功能丰富的jQuery树形插件,它提供了多种操作和显示树形数据的方式,包括搜索功能。模糊搜索允许用户在输入部分关键词时找到...
ztree根据关键字模糊搜索 根据关键字显示叶子节点
**ZTree 模糊查询详解** ZTree 是一个基于 jQuery 的灵活可配置的树插件,广泛应用于网页端的数据展示和交互。它不仅支持传统的树结构数据,还提供了丰富的功能,如节点操作、异步加载、多选模式、拖拽等。在实际...
zTreeFuzzySearch是一款基于zTree插件实现的带有模糊搜索功能的树目录组件,它借鉴了亚马逊中文网图书板块的设计,使得用户能够在庞大的目录结构中快速、准确地找到所需的信息。这一功能在项目开发中具有很高的实用...
在本案例中,我们关注的是"带搜索的ztree 结果高亮"这一功能,这是一项增强用户交互体验的重要特性,使得用户能够快速定位和筛选树形数据。 首先,我们要理解ztree的基本结构和工作原理。ZTree通过JSON数据格式来...
"Ztree利用getNodesByFilter进行js搜索 搜索父级隐藏"这一主题涉及到在ZTree中实现高级搜索功能,特别是当需要隐藏不符合条件的父级节点时。通常,ZTree展示的数据结构是一个层次化的树形结构,每个节点可能包含子...
这种搜索可能包括对节点文本、ID或其他自定义属性的模糊匹配。搜索结果通常会高亮显示,以便用户一眼就能识别出目标节点。同时,ZTree还支持自动定位,意味着一旦找到匹配项,它会自动滚动到相应节点,确保用户能够...
在本文中,我们将深入探讨jQuery zTree插件的两个核心功能:异步加载和模糊搜索。zTree是一款广泛使用的JavaScript树形控件,它能够帮助开发者构建动态、交互性强的树结构界面。以下是对这两个功能的详细解释: 一...
这通常涉及对ZTree的数据模型进行处理,以及对搜索逻辑的实现,可能包括模糊匹配、精确匹配等多种策略。 在描述中提到的"grant.jsp",可能是展示这个改造后ZTree效果的页面。开发者可以通过访问这个页面来查看和...