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 相关文章推荐
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
JS 图片缩放效果代码
Jun 09 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
js实现返回顶部效果
Mar 10 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
react 生命周期实例分析
May 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
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
logging level级别介绍
2020/02/21 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
兼职业务员岗位职责
2014/01/01 职场文书
西式婚礼证婚词
2014/01/12 职场文书
创业计划书模版
2014/02/05 职场文书
小学语文教研活动总结
2014/07/01 职场文书
2014年调度员工作总结
2014/11/19 职场文书
工作服管理制度范本
2015/08/06 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers