jquery ztree異步搜索(搜葉子)實(shí)踐
一、初始異步加載樹(shù)
初始化默認(rèn)給出一個(gè)根結(jié)點(diǎn),再結(jié)合異步加載的方式手動(dòng)觸發(fā)默認(rèn)加載第一層,如圖:
代碼如下:
var treeSetting = { async: { enable: true, <a rel="nofollow">url:"xxx/demo.do?method=listByTree</a>", dataType:"json", autoParam:["id=pid"] }, view: { dblClickExpand: true, selectedMulti: false, expandSpeed: ($.browser.msie && parseInt($.browser.version)<=6)?"":"fast" }, data: { simpleData: { enable:true, idKey: "id", pIdKey: "pid", rootPId: "root" } }, callback: { onNodeCreated: zTreeOnNodeCreated } }; //默認(rèn)根結(jié)點(diǎn) var rootNode = {"id":0, "pid":"root", "name":"商品分類", "open":true, "isParent":true}; $(document).ready(function(){ var zTreeObj = $.fn.zTree.init($("#tree"), treeSetting, rootNode); var node = zTreeObj.getNodeByParam("id", 0, null); zTreeObj.reAsyncChildNodes(node, "refresh"); });
二、異步搜索葉子結(jié)點(diǎn)
在使用JQuery ZTREE時(shí)可能要用到異步的方式模糊搜索葉子結(jié)點(diǎn),如圖:
而如果只使用ZTREE自帶的展開(kāi)方法zTreeObj.expandNode只是會(huì)展開(kāi)改結(jié)點(diǎn),無(wú)法觸發(fā)異步加載;這時(shí)候就必須手動(dòng)調(diào)用異步加載的方法進(jìn)行處理,解決思路如下:
通過(guò)在otherParam數(shù)組中設(shè)值的方式將搜索參數(shù)帶到后臺(tái)(無(wú)參數(shù)時(shí)必須將otherParam設(shè)為空數(shù)組否則一直會(huì)將前一次的參數(shù)帶到后臺(tái));在結(jié)點(diǎn)創(chuàng)建完成后的回調(diào)函數(shù)onNodeCreated中進(jìn)行手動(dòng)異步加載。
代碼如下:
function searchM() { var param = $.trim($("input[name='param']").val()); var treeObj = $.fn.zTree.getZTreeObj("tree"); var node = treeObj.getNodeByParam("id", 0, null); if(param != ""){ param = encodeURI(encodeURI(param)); treeObj.setting.async.otherParam=["param", param]; }else { //搜索參數(shù)為空時(shí)必須將參數(shù)數(shù)組設(shè)為空 treeObj.setting.async.otherParam=[]; } treeObj.reAsyncChildNodes(node, "refresh"); } function zTreeOnNodeCreated(event, treeId, treeNode) { var param <span></span><span></span>= $.tr<span></span>im($("input[name='param']").val()); var treeObj = $.fn.zTree.getZTreeObj("tree"); //只有搜索參數(shù)不為空且該節(jié)點(diǎn)為父節(jié)點(diǎn)時(shí)才進(jìn)行異步加載 if(param != "" && treeNode.isParent){ treeObj.reAsyncChildNodes(treeNode, "refresh"); } };
更多關(guān)于ztree控件的內(nèi)容,請(qǐng)參考專題《jQuery插件ztree使用匯總》 。
以上就是關(guān)于jquery ztree異步搜索的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- C#使用Jquery zTree實(shí)現(xiàn)樹(shù)狀結(jié)構(gòu)顯示 異步數(shù)據(jù)加載
- jquery zTree異步加載、模糊搜索簡(jiǎn)單實(shí)例分享
- jQuery使用zTree插件實(shí)現(xiàn)樹(shù)形菜單和異步加載
- Jquery zTree 樹(shù)控件異步加載操作
- jquery zTree異步加載簡(jiǎn)單實(shí)例講解
- JQuery ztree帶篩選、異步加載實(shí)例講解
- JQuery ztree 異步加載實(shí)例講解
- jquery zTree異步加載簡(jiǎn)單實(shí)例分享
- Jquery樹(shù)插件zTree用法入門教程
- zTree樹(shù)形插件異步加載方法詳解
相關(guān)文章
greybox——不開(kāi)新窗口看新的網(wǎng)頁(yè)
這篇文章主要介紹了greybox——不開(kāi)新窗口看新的網(wǎng)頁(yè)2007-02-02jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果(可關(guān)閉可拖動(dòng))
這篇文章主要介紹了jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果,具有可關(guān)閉可拖動(dòng)的功能,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁(yè)面元素樣式的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09那些年,我還在學(xué)習(xí)jquery 學(xué)習(xí)筆記
那些年學(xué)習(xí)了一些基本的web開(kāi)發(fā)知識(shí),其中已經(jīng)有javascript語(yǔ)言了,為什么還要學(xué)習(xí)Jquery啊2012-03-03JavaScript jQuery 中定義數(shù)組與操作及jquery數(shù)組操作
這篇文章主要介紹了JavaScript jQuery 中定義數(shù)組與操作及jquery數(shù)組操作的相關(guān)資料,需要的朋友可以參考下2015-12-1230個(gè)最佳jQuery Lightbox效果插件分享
Lightbox 應(yīng)該是最流行的圖片瀏覽效果了,常具有功能包括:自動(dòng)根據(jù)窗口的大小縮放圖片,模式窗口,幻燈片方式播放,內(nèi)容預(yù)加載,漸變等效果。2011-04-04jquery實(shí)現(xiàn)動(dòng)態(tài)添加附件功能
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)添加附件功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10jquery實(shí)現(xiàn)微博文字輸入框 輸入時(shí)顯示輸入字?jǐn)?shù) 效果實(shí)現(xiàn)
這篇文章介紹了用jquery實(shí)現(xiàn)微博文字輸入框 輸入時(shí)顯示輸入字?jǐn)?shù)的效果,有需要的朋友可以參考一下2013-07-07