欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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í)有所幫助。

相關(guān)文章

最新評(píng)論