本文实例分享了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) "#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实现树的搜索功能的相关资料,希望能够对大家的学习。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“jquery ztree实现树的搜索功能”评论...
更新日志
2025年10月29日
2025年10月29日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]