jquery ztree实现树的搜索功能


Posted in Javascript onFebruary 25, 2016

本文实例分享了jquery ztree实现树的搜索功能,供大家参考,具体内容如下

var userZTree; 
var userSetting={ 
 check: { 
  enable: true, 
  chkStyle: "radio", 
  chkboxType : {"Y" : "" , "N" : ""}, 
  radioType: "all" 
 }, 
 data: { 
  simpleData: { 
  enable: true, 
  idKey : "id", 
  pIdKey : "pid" 
  } 
 }, 
 callback:{ 
  onClick : clickCheck 
 }, 
 view :{ 
  showIcon: false, 
  fontCss: getFontCss 
 } 
};

这里要加一个属性:view:{fontCss:getFontCss}
这里的getFontCss为自己写的一个方法:

function getFontCss(treeId, treeNode) { 
 return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"}; 
}

这样就可以实现变色功能了;
接下来 要在自己写的显示树上方加一个搜索输入框:

<div id="userDiv" class="showParentDiv showDiv" style="z-index:105;display: none;"> 
 <div class="grayBg"> 
  <div class="toolbar"> 
  <input type="button" value=" <s:text name='button.submit'/> " onclick="submitUser();"/> 
  <input type="button" value=" <s:text name='button.cancel'/> " onclick="closeUserDiv();"/> 
  <input type="button" value=" 新建 " onclick="toAddDiv();"/> 
 </div> 
 </div> 
 <div style="text-align:left;margin:5px;height: 15px;">按名字过滤:<input type="text" id="dicKey" onkeyup="changeColor('userTree','name',this.value)"/></div> 
 <ul id="userTree" class="ztree" style="height:350px; overflow-y:scroll;"></ul> 
</div>

这里可以看到调用了changeColor方法:

//使用搜索数据 加高亮显示功能,需要2步 
//1.在tree的setting 的view 设置里面加上 fontCss: getFontCss 设置 
//2.在ztree容器上方,添加一个文本框,并添加onkeyup事件,该事件调用固定方法 changeColor(id,key,value) 
// id指ztree容器的id,一般为ul,key是指按ztree节点的数据的哪个属性为条件来过滤,value是指过滤条件,该过滤为模糊过滤 
function changeColor(id,key,value){ 
 treeId = id; 
 updateNodes(false); 
 if(value != ""){ 
 var treeObj = $.fn.zTree.getZTreeObj(treeId); 
 nodeList = treeObj.getNodesByParamFuzzy(key, value); 
 if(nodeList && nodeList.length>0){ 
  updateNodes(true); 
 } 
 } 
} 
function updateNodes(highlight) { 
 var treeObj = $.fn.zTree.getZTreeObj(treeId); 
 for( var i=0; i<nodeList.length; i++) { 
 nodeList[i].highlight = highlight; 
 treeObj.updateNode(nodeList[i]); 
 } 
} 

treeObj.getNodesByParamFuzzy(key, value);

是检索的ztree函数;
这样就ok了 ,可以实现搜索功能了。

更多关于ztree控件的内容,请参考专题《jQuery插件ztree使用汇总》 。

以上就是为大家分析的ztree实现树的搜索功能的相关资料,希望能够对大家的学习。

Javascript 相关文章推荐
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 #Javascript
JQuery ztree 异步加载实例讲解
Feb 25 #Javascript
Node.js编写组件的三种实现方式
Feb 25 #Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 #Javascript
你所未知的3种Node.js代码优化方式
Feb 25 #Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 #Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 #Javascript
You might like
玩转图像函数库―常见图形操作
2006/09/03 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
javascript call方法使用说明
2010/01/11 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
javascript测试题练习代码
2012/10/10 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
vue实现分页加载效果
2019/12/24 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python实现的RSS阅读器实例
2015/07/25 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
Python读取csv文件实例解析
2019/12/30 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
new修饰符是起什么作用
2015/06/28 面试题
学生个人自我鉴定范文
2014/03/28 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
企业法人代表证明书
2015/06/18 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
oracle重置序列从0开始递增1
2022/02/28 Oracle
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers