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":"商品分類(lèi)", "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)參考專(zhuān)題《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用法入門(mén)教程
- zTree樹(shù)形插件異步加載方法詳解
相關(guān)文章
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實(shí)現(xiàn)拖動(dòng)基本操作
這篇文章主要幫大家輕松學(xué)習(xí)jQuery插件EasyUI,并利用EasyUI實(shí)現(xiàn)拖動(dòng)基本操作,文章并提供了一個(gè)學(xué)校課程表簡(jiǎn)單實(shí)例,感興趣的小伙伴們可以參考一下2015-11-11
jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的觸摸事件與虛擬鼠標(biāo)事件簡(jiǎn)介
這篇文章主要介紹了jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的觸摸事件與虛擬鼠標(biāo)事件的簡(jiǎn)單編寫(xiě)方法,jQuery是當(dāng)今人氣最高的Javascript庫(kù)并被廣泛應(yīng)用于移動(dòng)web的開(kāi)發(fā),需要的朋友可以參考下2015-12-12
jQuery實(shí)現(xiàn)的動(dòng)態(tài)伸縮導(dǎo)航菜單實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的動(dòng)態(tài)伸縮導(dǎo)航菜單,實(shí)例分析了jQuery鼠標(biāo)事件及animate、hide等方法的使用技巧,需要的朋友可以參考下2015-05-05
自寫(xiě)的jQuery異步加載數(shù)據(jù)添加事件
這篇文章主要介紹一個(gè)自寫(xiě)的jQuery異步加載數(shù)據(jù)添加事件的方法,需要的朋友可以參考下2014-05-05
jQuery內(nèi)部原理和實(shí)現(xiàn)方式淺析
這篇文章主要介紹了jQuery內(nèi)部原理和實(shí)現(xiàn)方式淺析,本文試圖從整體來(lái)闡述一下jQuery的內(nèi)部實(shí)現(xiàn),需要的朋友可以參考下2015-02-02
jQuery easyui刷新當(dāng)前tabs的方法
這篇文章給大家介紹了jquery easyui刷新當(dāng)前tabs的方法,本文涉及到param參數(shù)的屬性知識(shí)點(diǎn),本文通過(guò)實(shí)例給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-09-09
jquery中g(shù)et,post和ajax方法的使用小結(jié)
本篇文章主要是對(duì)jquery中g(shù)et,post和ajax方法的使用進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02
jQuery插件 tabBox實(shí)現(xiàn)代碼
最近對(duì)js以及jq產(chǎn)生了濃厚的興趣,看到j(luò)q有很多很好用的插件,功能各異,包括webUI,jqGrid等等。心里萌發(fā)了制作屬于自己的jq插件的想法。2010-02-02

