zTree實現(xiàn)樹形圖模糊搜索

zTree實現(xiàn)樹形圖模糊搜索

項目概述:

項目地址 https://github.com/bigablecat/zTreeFuzzySearch
本項目為 zTree 添加模糊搜索功能
zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”
當(dāng)前功能已被 zTree 收錄，可查看官方 demo演示

1. 在搜索框中輸入關(guān)鍵字,希望實現(xiàn)的效果:

a). 樹形圖隱藏所有不匹配的節(jié)點

b). 節(jié)點名稱中匹配部分高亮

2. 慢速演示:

ztree_demo.gif

3. 完整代碼和詳細(xì)注釋如下:

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插件擴(kuò)展功能 -->
<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自定義高亮?xí)r，一定要設(shè)置fontCss,setHighlight是自定義高亮方法
                //fontCss: setHighlight,
                nameIsHTML: true, //允許name支持html                
                selectedMulti: false
            },
            edit: {
                enable: false,
                editNameSelectAll: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
    };
    
    $(document).ready(function(){
        //從服務(wù)器讀取數(shù)據(jù)并初始化樹形圖
        //loadDataFromServer(urlStr);  
        //本例直接從模擬數(shù)據(jù)dataset.js讀取
        loadDataFromLocal();//從本地dataset.js文件讀取模擬數(shù)據(jù)并初始化樹形圖
    });

    /**
     * 通過ajax方法從服務(wù)器獲取數(shù)據(jù)并初始化樹形圖
     */
    function loadDataFromServer(urlStr){
         $.ajax({                 
            type: "get",                 
            dataType: "json",
            url: urlStr,  //服務(wù)請求地址 
            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中預(yù)先定義的模擬數(shù)據(jù)
        initThisZtree(mockData);//傳入數(shù)據(jù),初始化ztree
        // zTreeId ztree對象的id,不需要#
        // searchField 輸入框選擇器
        // isHighLight 是否高亮,默認(rèn)高亮,傳入false禁用
        // isExpand 是否展開,默認(rèn)合攏,傳入true展開
        fuzzySearch('book','#keyword',null,true); //初始化模糊搜索方法
    }
    
    /**
     * 初始化ztree
     * 
     * @param {Object} data
     */
    function initThisZtree(data){
        //初始化ztree三個參數(shù)分別是(jQuery對象,ztree設(shè)置,樹節(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 是否高亮,默認(rèn)高亮,傳入false禁用
 * @param isExpand 是否展開,默認(rèn)合攏,傳入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的情況外,都默認(rèn)為高亮
    isExpand = isExpand?true:false;
    zTreeObj.setting.view.nameIsHTML = isHighLight;//允許在節(jié)點名稱中使用html,用于處理高亮
    
    var metaChar = '[\\[\\]\\\\\^\\$\\.\\|\\?\\*\\+\\(\\)]'; //js正則表達(dá)式元字符集
    var rexMeta = new RegExp(metaChar, 'gi');//匹配元字符的正則表達(dá)式
    
    // 過濾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; //如果存在原始名稱則恢復(fù)原始名稱
            }
            //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){ //如果高亮，對文字進(jìn)行高亮處理
                    //創(chuàng)建一個新變量newKeywords,不影響_keywords在下一個節(jié)點使用
                    //對_keywords中的元字符進(jìn)行處理,否則無法在replace中使用RegExp
                    var newKeywords = _keywords.replace(rexMeta,function(matchStr){
                        //對元字符做轉(zhuǎn)義處理
                        return '\\' + matchStr;
                        
                    });
                    node.oldname = node[nameKey]; //緩存原有名稱用于恢復(fù)
                    //為處理過元字符的_keywords創(chuàng)建正則表達(dá)式,全局且不分大小寫
                    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)鍵字高亮處理,所以不再進(jìn)行相關(guān)設(shè)置
                    //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é)點進(jìn)行二次處理
    }
    
    /**
     * 對符合條件的節(jié)點做二次處理
     */
    function processShowNodes(nodesShow,_keywords){
        if(nodesShow && nodesShow.length>0){
            //關(guān)鍵字不為空時對關(guān)鍵字節(jié)點的祖先節(jié)點進(jìn)行二次處理
            if(_keywords.length>0){ 
                $.each(nodesShow, function(n,obj){
                    var pathOfOne = obj.getPath();//向上追溯,獲取節(jié)點的所有祖先節(jié)點(包括自己)
                    if(pathOfOne && pathOfOne.length>0){ //對path中的每個節(jié)點進(jìn)行操作
                        // 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é)束任務(wù)
            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": "文學(xué)",
    "pId": "0",
    "id": "00"
}, {
    "name": "歷史",
    "pId": "0",
    "id": "01"
}, {
    "name": "法律",
    "pId": "0",
    "id": "02"
}, {
    "name": "辭典與工具書",
    "pId": "0",
    "id": "03"
}, {
    "name": "科學(xué)與自然",
    "pId": "0",
    "id": "04"
},{
    "name": "自然科學(xué)總論",
    "pId": "04",
    "id": "040"
},{
    "name": "數(shù)學(xué)",
    "pId": "04",
    "id": "041"
},{
    "name": "物理",
    "pId": "04",
    "id": "042"
},{
    "name": "天文學(xué) 地球科學(xué)",
    "pId": "04",
    "id": "043"
}, {
    "name": "計算機(jī)與互聯(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": "計算機(jī)科學(xué)理論",
    "pId": "05",
    "id": "053"
}, {
    "name": "云計算與大數(shù)據(jù)",
    "pId": "05",
    "id": "054"
}]

4.參考資料:

a). ztree根據(jù)關(guān)鍵字模糊搜索
b). 我也來實現(xiàn)ztree模糊搜索功能

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容