ztree 加搜索框_zTree实现树形图模糊搜索

0. 项目地址:

1. 在搜索框中输入关键字,希望实现的效果:

a). 树形图隐藏所有不匹配的节点

b). 节点名称中匹配部分高亮

2. 慢速演示:

3. 完整代码和详细注释如下:

a). html部分

ul.ztree {

margin-top: 10px;

border: 1px solid #617775;

width: 600px;

height: 450px;

overflow-y: scroll;

overflow-x: auto;

}

div.zTreeDemoBackground {

width: 600px;

height: 450px;

text-align: left;

}

span.search_highlight {

color: whitesmoke;

background-color: darkred;

}

*参照亚马逊中文网图书板块的结构创建了模拟数据

//此高亮用于整个节点

/* function setHighlight(treeId, treeNode) {

return (treeNode.highlight) ? {"font-weight":"bold", "background-color": "#ddd"} : {"font-weight":"normal", "background-color": "transparent"};

} */

//ztree配置

var setting = {

check: {

enable: true//checkbox

},

view: {

// 使用ztree自定义高亮时，一定要设置fontCss,setHighlight是自定义高亮方法

//fontCss: setHighlight,

nameIsHTML: true, //允许name支持html

selectedMulti: false

},

edit: {

enable: false,

editNameSelectAll: false

},

data: {

simpleData: {

enable: true

}

}

};

$(document).ready(function(){

//从服务器读取数据并初始化树形图

//loadDataFromServer(urlStr);

//本例直接从模拟数据dataset.js读取

loadDataFromLocal();//从本地dataset.js文件读取模拟数据并初始化树形图

});

/**

* 通过ajax方法从服务器获取数据并初始化树形图

*/

function loadDataFromServer(urlStr){

$.ajax({

type: "get",

dataType: "json",

url: urlStr, //服务请求地址

success: function(data) {

initThisZtree(data);//传入数据,初始化ztree

fuzzySearch('book','#keyword',null,true); //初始化模糊搜索方法

}

});

}

/**

* 从本地js/dataset.js文件读取模拟数据并初始化树形图

*/

function loadDataFromLocal(){

//此处的树节点数据mockData是在本地js/dataSet.js中预先定义的模拟数据

initThisZtree(mockData);//传入数据,初始化ztree

// zTreeId ztree对象的id,不需要#

// searchField 输入框选择器

// isHighLight 是否高亮,默认高亮,传入false禁用

// isExpand 是否展开,默认合拢,传入t