快捷導(dǎo)航

jquery ztree異步搜索（搜葉子）實(shí)踐

更新時(shí)間：2016年02月25日 09:45:14 投稿：lijiao

這篇文章主要介紹了jquery ztree異步搜索，即搜葉子實(shí)踐，使用jquery ztree開(kāi)發(fā)的樹(shù)控件經(jīng)常需要進(jìn)行一些異步查找葉子節(jié)點(diǎn)的操作，感興趣的小伙伴們可以參考一下

一、初始異步加載樹(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í)有所幫助。

您可能感興趣的文章: