jquery ztree实现树的搜索高亮显示功能
<div class="ibox" style="margin-bottom: 0"><div><input type="text" class="empty" id="keyword" maxlength="50" placeholder="关键字搜索"style="width: 180px;background: #223e4a"><button cl
·
添加搜索框:
<div class="ibox" style="margin-bottom: 0">
<div>
<input type="text" class="empty" id="keyword" maxlength="50" placeholder="关键字搜索"
style="width: 180px;background: #223e4a">
<button class="btn" id="btn" onclick="searchNode('tree','name')"
style="background: #1e7894;padding: 3px 10px;font-size: 12px;"> 搜索
</button>
</div>
<div class="ibox-content" style="overflow: scroll;height: 28vw">
<div id="tree" class="ztree"></div>
</div>
</div>
var setting = {
async: {
enable: true, // 异步加载
url:ctx + "system/dept/treeData",
autoParam:["id", "name=n", "level=lv"]
},
data: {
key: {
title: "title" // 节点数据保存节点提示信息的属性名称
},
simpleData: {
enable: true // true / false 分别表示 使用 / 不使用 简单数据模式
}
},
callback: {
onRightClick: zTreeOnRightClick
},
view :{
showIcon: false,
fontCss: getFontCss
}
};
$(function () {
$.fn.zTree.init($("#tree"), setting);
});
function zTreeOnRightClick(event, treeId, treeNode) {
if (treeNode.level && treeNode.level >= 4) {
var selectedId = treeNode.id;
}
}
搜索方法:
//使用搜索数据 加高亮显示功能,需要2步
//1.在tree的setting 的view 设置里面加上 fontCss: getFontCss 设置
//2.在ztree容器上方,添加一个文本框,并添加onkeyup事件,该事件调用固定方法 changeColor(id,key,value)
// id指ztree容器的id,一般为ul,key是指按ztree节点的数据的哪个属性为条件来过滤,value是指过滤条件,该过滤为模糊过滤
function searchNode(treeId,key){
var value = $("#keyword").val();
var treeObj = $.fn.zTree.getZTreeObj(treeId);
// treeObj.expandAll(true);
var nodeList = treeObj.getNodesByParamFuzzy(key, value);
updateNodes(false);
if(value != ""){
if(nodeList && nodeList.length>0){
updateNodes(true);
}
}
function updateNodes(highlight) {
if (highlight == false) {
var nodes = treeObj.transformToArray(treeObj.getNodes());
for( var i=0; i<nodes.length; i++) {
nodes[i].highlight = highlight;
treeObj.updateNode(nodes[i]);
}
}else{
for( var i=0; i<nodeList.length; i++) {
nodeList[i].highlight = highlight;
treeObj.updateNode(nodeList[i]);
}
}
}
}
function getFontCss(treeId, treeNode) {
return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#fff", "font-weight":"normal"};
}
更多推荐
所有评论(0)