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

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

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

一、初始異步加載樹

初始化默認給出一個根結點，再結合異步加載的方式手動觸發(fā)默認加載第一層，如圖：

代碼如下：

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
 }
};
 
//默認根結點
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");
});

二、異步搜索葉子結點

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

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

代碼如下：

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 {
 //搜索參數為空時必須將參數數組設為空
 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");
 //只有搜索參數不為空且該節(jié)點為父節(jié)點時才進行異步加載
 if(param != "" && treeNode.isParent){
 treeObj.reAsyncChildNodes(treeNode, "refresh");
 } 
};

更多關于ztree控件的內容，請參考專題《jQuery插件ztree使用匯總》。

以上就是關于jquery ztree異步搜索的全部內容，希望對大家的學習有所幫助。

您可能感興趣的文章: