jquery ztree異步搜索（搜葉子）實踐

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

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

一、初始異步加載樹

初始化默認(rèn)給出一個根結(jié)點，再結(jié)合異步加載的方式手動觸發(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é)點
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é)點

在使用JQuery ZTREE時可能要用到異步的方式模糊搜索葉子結(jié)點，如圖：

而如果只使用ZTREE自帶的展開方法zTreeObj.expandNode只是會展開改結(jié)點，無法觸發(fā)異步加載；這時候就必須手動調(diào)用異步加載的方法進(jìn)行處理，解決思路如下：
通過在otherParam數(shù)組中設(shè)值的方式將搜索參數(shù)帶到后臺（無參數(shù)時必須將otherParam設(shè)為空數(shù)組否則一直會將前一次的參數(shù)帶到后臺）；在結(jié)點創(chuàng)建完成后的回調(diào)函數(shù)onNodeCreated中進(jìn)行手動異步加載。

代碼如下：

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è)為空
 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é)點為父節(jié)點時才進(jìn)行異步加載
 if(param != "" && treeNode.isParent){
 treeObj.reAsyncChildNodes(treeNode, "refresh");
 } 
};

更多關(guān)于ztree控件的內(nèi)容，請參考專題《jQuery插件ztree使用匯總》。

以上就是關(guān)于jquery ztree異步搜索的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: