zTree實現(xiàn)樹形圖模糊搜索
項目概述:
項目地址 https://github.com/bigablecat/zTreeFuzzySearch
本項目為 zTree 添加模糊搜索功能
zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”
當前功能已被 zTree 收錄，可查看官方 demo演示
1. 在搜索框中輸入關(guān)鍵字,希望實現(xiàn)的效果:
a). 樹形圖隱藏所有不匹配的節(jié)點
b). 節(jié)點名稱中匹配部分高亮
2. 慢速演示:
ztree_demo.gif
3. 完整代碼和詳細注釋如下:
a). html部分
<!-- fuzzysearch.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/metro.css" />
<style type="text/css">
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;
}
</style>
<!-- 定義了一些模擬數(shù)據(jù)的js文件dataset.js -->
<script type="text/javascript" src="js/dataset.js"></script>
<!-- 引入jquery -->
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<!-- 引入ztree插件 -->
<script type="text/javascript" src="js/jquery.ztree.all.min.js"></script>
<!-- 引入ztree插件擴展功能 -->
<script type="text/javascript" src="js/jquery.ztree.exhide.min.js"></script>
<!-- 引入自定義方法 -->
<script type="text/javascript" src="js/fuzzysearch.js"></script>
</head>
<body>
<div style="width: 600px">
<input id="keyword" type="search" placeHolder="搜索關(guān)鍵字"/>
</div>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="book" class="ztree"></ul>
</div>
</div>
<br />
<div><small>*參照亞馬遜中文網(wǎng)圖書板塊的結(jié)構(gòu)創(chuàng)建了模擬數(shù)據(jù)</small></div>
<script type="text/javascript">
//此高亮用于整個節(jié)點
/* 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(){
//從服務器讀取數(shù)據(jù)并初始化樹形圖
//loadDataFromServer(urlStr);
//本例直接從模擬數(shù)據(jù)dataset.js讀取
loadDataFromLocal();//從本地dataset.js文件讀取模擬數(shù)據(jù)并初始化樹形圖
});
/**
* 通過ajax方法從服務器獲取數(shù)據(jù)并初始化樹形圖
*/
function loadDataFromServer(urlStr){
$.ajax({
type: "get",
dataType: "json",
url: urlStr, //服務請求地址
success: function(data) {
initThisZtree(data);//傳入數(shù)據(jù),初始化ztree
fuzzySearch('book','#keyword',null,true); //初始化模糊搜索方法
}
});
}
/**
* 從本地js/dataset.js文件讀取模擬數(shù)據(jù)并初始化樹形圖
*/
function loadDataFromLocal(){
//此處的樹節(jié)點數(shù)據(jù)mockData是在本地js/dataSet.js中預先定義的模擬數(shù)據(jù)
initThisZtree(mockData);//傳入數(shù)據(jù),初始化ztree
// zTreeId ztree對象的id,不需要#
// searchField 輸入框選擇器
// isHighLight 是否高亮,默認高亮,傳入false禁用
// isExpand 是否展開,默認合攏,傳入true展開
fuzzySearch('book','#keyword',null,true); //初始化模糊搜索方法
}
/**
* 初始化ztree
*
* @param {Object} data
*/
function initThisZtree(data){
//初始化ztree三個參數(shù)分別是(jQuery對象,ztree設置,樹節(jié)點數(shù)據(jù))
var treeObj = $.fn.zTree.init($("#book"), setting, data);
treeObj.expandAll(true);
}
</script>
</body>
</html>
b). js部分
/**
*
* @param zTreeId ztree對象的id,不需要#
* @param searchField 輸入框選擇器
* @param isHighLight 是否高亮,默認高亮,傳入false禁用
* @param isExpand 是否展開,默認合攏,傳入true展開
* @returns
*/
function fuzzySearch(zTreeId, searchField, isHighLight, isExpand){
var zTreeObj = $.fn.zTree.getZTreeObj(zTreeId);//獲取樹對象
if(!zTreeObj){
alter("獲取樹對象失敗");
}
var nameKey = zTreeObj.setting.data.key.name; //獲取name屬性的key
isHighLight = isHighLight===false?false:true;//除直接輸入false的情況外,都默認為高亮
isExpand = isExpand?true:false;
zTreeObj.setting.view.nameIsHTML = isHighLight;//允許在節(jié)點名稱中使用html,用于處理高亮
var metaChar = '[\\[\\]\\\\\^\\$\\.\\|\\?\\*\\+\\(\\)]'; //js正則表達式元字符集
var rexMeta = new RegExp(metaChar, 'gi');//匹配元字符的正則表達式
// 過濾ztree顯示數(shù)據(jù)
function ztreeFilter(zTreeObj,_keywords,callBackFunc) {
if(!_keywords){
_keywords =''; //如果為空则果，賦值空字符串
}
// 查找符合條件的葉子節(jié)點
function filterFunc(node) {
if(node && node.oldname && node.oldname.length>0){
node[nameKey] = node.oldname; //如果存在原始名稱則恢復原始名稱
}
//node.highlight = false; //取消高亮
zTreeObj.updateNode(node); //更新節(jié)點讓之前對節(jié)點所做的修改生效
if (_keywords.length == 0) {
//如果關(guān)鍵字為空,返回true,表示每個節(jié)點都顯示
zTreeObj.showNode(node);
zTreeObj.expandNode(node,isExpand); //關(guān)鍵字為空時是否展開節(jié)點
return true;
}
//節(jié)點名稱和關(guān)鍵字都用toLowerCase()做小寫處理
if (node[nameKey] && node[nameKey].toLowerCase().indexOf(_keywords.toLowerCase())!=-1) {
if(isHighLight){ //如果高亮炕淮，對文字進行高亮處理
//創(chuàng)建一個新變量newKeywords,不影響_keywords在下一個節(jié)點使用
//對_keywords中的元字符進行處理,否則無法在replace中使用RegExp
var newKeywords = _keywords.replace(rexMeta,function(matchStr){
//對元字符做轉(zhuǎn)義處理
return '\\' + matchStr;
});
node.oldname = node[nameKey]; //緩存原有名稱用于恢復
//為處理過元字符的_keywords創(chuàng)建正則表達式,全局且不分大小寫
var rexGlobal = new RegExp(newKeywords, 'gi');//'g'代表全局匹配,'i'代表不區(qū)分大小寫
//無法直接使用replace(/substr/g,replacement)方法,所以使用RegExp
node[nameKey] = node.oldname.replace(rexGlobal, function(originalText){
//將所有匹配的子串加上高亮效果
var highLightText =
'<span style="color: whitesmoke;background-color: darkred;">'
+ originalText
+'</span>';
return highLightText;
});
//================================================//
//node.highlight用于高亮整個節(jié)點
//配合setHighlight方法和setting中view屬性的fontCss
//因為有了關(guān)鍵字高亮處理,所以不再進行相關(guān)設置
//node.highlight = true;
//================================================//
zTreeObj.updateNode(node); //update讓更名和高亮生效
}
zTreeObj.showNode(node);//顯示符合條件的節(jié)點
return true; //帶有關(guān)鍵字的節(jié)點不隱藏
}
zTreeObj.hideNode(node); // 隱藏不符合要求的節(jié)點
return false; //不符合返回false
}
var nodesShow = zTreeObj.getNodesByFilter(filterFunc); //獲取匹配關(guān)鍵字的節(jié)點
processShowNodes(nodesShow, _keywords);//對獲取的節(jié)點進行二次處理
}
/**
* 對符合條件的節(jié)點做二次處理
*/
function processShowNodes(nodesShow,_keywords){
if(nodesShow && nodesShow.length>0){
//關(guān)鍵字不為空時對關(guān)鍵字節(jié)點的祖先節(jié)點進行二次處理
if(_keywords.length>0){
$.each(nodesShow, function(n,obj){
var pathOfOne = obj.getPath();//向上追溯,獲取節(jié)點的所有祖先節(jié)點(包括自己)
if(pathOfOne && pathOfOne.length>0){ //對path中的每個節(jié)點進行操作
// i < pathOfOne.length-1, 對節(jié)點本身不再操作
for(var i=0;i<pathOfOne.length-1;i++){
zTreeObj.showNode(pathOfOne[i]); //顯示節(jié)點
zTreeObj.expandNode(pathOfOne[i],true); //展開節(jié)點
}
}
});
}else{ //關(guān)鍵字為空則顯示所有節(jié)點, 此時展開根節(jié)點
var rootNodes = zTreeObj.getNodesByParam('level','0');//獲得所有根節(jié)點
$.each(rootNodes,function(n,obj){
zTreeObj.expandNode(obj,true); //展開所有根節(jié)點
});
}
}
}
//監(jiān)聽關(guān)鍵字input輸入框文字變化事件
$(searchField).bind('input propertychange', function() {
var _keywords = $(this).val();
searchNodeLazy(_keywords); //調(diào)用延時處理
});
var timeoutId = null;
// 有輸入后定時執(zhí)行一次治力，如果上次的輸入還沒有被執(zhí)行呐矾，那么就取消上一次的執(zhí)行
function searchNodeLazy(_keywords) {
if (timeoutId) { //如果不為空,結(jié)束任務
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function() {
ztreeFilter(zTreeObj,_keywords); //延時執(zhí)行篩選方法
$(searchField).focus();//輸入框重新獲取焦點
}, 500);
}
}
c). 模擬數(shù)據(jù)部分
/*dataset.js*/
var mockData = [{
"name": "圖書",
"pId": "",
"id": "0"
}, {
"name": "其他1",
"pId": "",
"id": "1"
},{
"name": "其他2",
"pId": "",
"id": "2"
},{
"name": "其他3",
"pId": "",
"id": "3"
},
{
"name": "測試js正則元字符:[]\\^$.|?*+()",
"pId": "0",
"id": "06"
},{
"name": "測試其他字符:{}<>'\"~`!@#%&-;:/,",
"pId": "0",
"id": "07"
},{
"name": "測試大小寫同節(jié)點: 大寫ABDEFGHINQRT,小寫abdefghinqrt",
"pId": "0",
"id": "08"
},{
"name": "測試大寫ABDEFGHINQRT",
"pId": "0",
"id": "09"
},{
"name": "測試小寫abdefghinqrt",
"pId": "0",
"id": "10"
},{
"name": "文學",
"pId": "0",
"id": "00"
}, {
"name": "歷史",
"pId": "0",
"id": "01"
}, {
"name": "法律",
"pId": "0",
"id": "02"
}, {
"name": "辭典與工具書",
"pId": "0",
"id": "03"
}, {
"name": "科學與自然",
"pId": "0",
"id": "04"
},{
"name": "自然科學總論",
"pId": "04",
"id": "040"
},{
"name": "數(shù)學",
"pId": "04",
"id": "041"
},{
"name": "物理",
"pId": "04",
"id": "042"
},{
"name": "天文學 地球科學",
"pId": "04",
"id": "043"
}, {
"name": "計算機與互聯(lián)網(wǎng)",
"pId": "0",
"id": "05"
}, {
"name": "編程與開發(fā)",
"pId": "05",
"id": "050"
}, {
"name": "編程語言與工具",
"pId": "050",
"id": "0500"
}, {
"name": "C & C++",
"pId": "0500",
"id": "05000"
},{
"name": "JAVA",
"pId": "0500",
"id": "05001"
},{
"name": "Python",
"pId": "0500",
"id": "05002"
},{
"name": "Python編程 從入門到實踐",
"pId": "05002",
"id": "050020"
},{
"name": "Python編程快速上手 讓繁瑣工作自動化",
"pId": "05002",
"id": "050021"
}, {
"name": "算法與數(shù)據(jù)結(jié)構(gòu)",
"pId": "050",
"id": "0501"
}, {
"name": "編譯原理和編譯器",
"pId": "050",
"id": "0502"
}, {
"name": "操作系統(tǒng)",
"pId": "05",
"id": "051"
}, {
"name": "數(shù)據(jù)庫",
"pId": "05",
"id": "052"
}, {
"name": "計算機科學理論",
"pId": "05",
"id": "053"
}, {
"name": "云計算與大數(shù)據(jù)",
"pId": "05",
"id": "054"
}]
