recherche asynchrone jquery ztree (recherche de feuilles) practice_jquery

1. Arbre de chargement asynchrone initial

L'initialisation donne un nœud racine par défaut, puis combine la méthode de chargement asynchrone pour déclencher manuellement le chargement par défaut de la première couche, comme le montre la figure :

Le code est le suivant :

var treeSetting = {
 async: {
 enable: true, <a href="http://my.oschina.net/wealpan/admin/"xxx/demo.do&#63;method=listByTree" rel="nofollow">url:"xxx/demo.do&#63;method=listByTree</a>",
 dataType:"json",
 autoParam:["id=pid"]
 },
 view: {
 dblClickExpand: true,
 selectedMulti: false,
 expandSpeed: ($.browser.msie && parseInt($.browser.version)<=6)&#63;"":"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");
});

2. Recherche asynchrone de nœuds feuilles

Lorsque vous utilisez JQuery ZTREE, vous devrez peut-être utiliser la recherche floue asynchrone pour les nœuds feuilles, comme indiqué dans la figure :

Si vous utilisez uniquement la méthode d'expansion zTreeObj.expandNode de ZTREE, elle n'étendra que le point de changement et ne pourra pas déclencher le chargement asynchrone. À ce stade, vous devez appeler manuellement la méthode de chargement asynchrone pour le traitement. 🎜> Amenez les paramètres de recherche en arrière-plan en définissant des valeurs dans le tableau otherParam (lorsqu'il n'y a pas de paramètres, otherParam doit être défini sur un tableau vide, sinon les paramètres précédents seront toujours ramenés en arrière-plan dans la fonction de rappel onNodeCreated) ; une fois le nœud créé, effectuez un chargement asynchrone manuel.

Le code est le suivant :

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");
 //只有搜索参数不为空且该节点为父节点时才进行异步加载
 if(param != "" && treeNode.isParent){
  treeObj.reAsyncChildNodes(treeNode, "refresh");
 } 
};

Ce qui précède concerne la recherche asynchrone jquery ztree. J'espère que cela sera utile à l'apprentissage de chacun.