jquery ztree實現(xiàn)樹的搜索功能
本文實例分享了jquery ztree實現(xiàn)樹的搜索功能,供大家參考,具體內(nèi)容如下
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) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"}; }
這樣就可以實現(xiàn)變色功能了;
接下來 要在自己寫的顯示樹上方加一個搜索輸入框:
<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>
這里可以看到調(diào)用了changeColor方法:
//使用搜索數(shù)據(jù) 加高亮顯示功能,需要2步 //1.在tree的setting 的view 設(shè)置里面加上 fontCss: getFontCss 設(shè)置 //2.在ztree容器上方,添加一個文本框,并添加onkeyup事件,該事件調(diào)用固定方法 changeColor(id,key,value) // id指ztree容器的id,一般為ul,key是指按ztree節(jié)點的數(shù)據(jù)的哪個屬性為條件來過濾,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函數(shù);
這樣就ok了 ,可以實現(xiàn)搜索功能了。
更多關(guān)于ztree控件的內(nèi)容,請參考專題《jQuery插件ztree使用匯總》 。
以上就是為大家分析的ztree實現(xiàn)樹的搜索功能的相關(guān)資料,希望能夠?qū)Υ蠹业膶W(xué)習(xí)。
相關(guān)文章
jquery中focus()函數(shù)實現(xiàn)當(dāng)對象獲得焦點后自動把光標(biāo)移到內(nèi)容最后
當(dāng)對象獲得焦點后,自動把光標(biāo)移到內(nèi)容最后,使用focus()函數(shù)便可實現(xiàn),下面有個不錯的示例,感興趣的朋友可以參考下2013-09-09struts2+jquery+json實現(xiàn)異步加載數(shù)據(jù)(自寫)
異步加載數(shù)據(jù)利用struts2+jquery+json實現(xiàn),具體代碼如下,感興趣的各位可以參考下哈,希望對大家有所幫助2013-06-06使用jQuery快速解決input中placeholder值在ie中無法支持的問題
本篇文章主要介紹了使用jQuery快速解決input中placeholder值在ie中無法支持的問題。需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01基于jQuery的煙花效果(運動相關(guān))點擊屏幕出煙花
基于jQuery的煙花效果(運動相關(guān))點擊屏幕出煙花 ,經(jīng)測試不能點擊過多,容易假死2012-06-06逐一介紹Jquery data()、Jquery stop()、jquery delay()函數(shù)(詳)
這篇文章逐一介紹Jquery data()、Jquery stop()、jquery delay()函數(shù)(詳)的相關(guān)資料,需要的朋友可以參考下2015-11-11jQuery自定義圖片縮放拖拽插件imageQ實現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了jQuery自定義圖片縮放拖拽插件imageQ實現(xiàn)方法,涉及jQuery擴展操作及頁面元素操作技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05