jquery ztree asynchrone Suche (Blattsuche) practice_jquery

1. Anfänglicher asynchroner Ladebaum

Die Initialisierung gibt standardmäßig einen Stammknoten an und kombiniert dann die asynchrone Lademethode, um das Standardladen der ersten Ebene manuell auszulösen, wie in der Abbildung gezeigt:

Der Code lautet wie folgt:

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. Asynchrone Suche nach Blattknoten

Wenn Sie JQuery ZTREE verwenden, müssen Sie möglicherweise die asynchrone Fuzzy-Suche nach Blattknoten verwenden, wie in der Abbildung gezeigt:

Wenn Sie nur die ZTREE-eigene Erweiterungsmethode zTreeObj.expandNode verwenden, wird nur der Änderungspunkt erweitert und kein asynchrones Laden ausgelöst. Zu diesem Zeitpunkt müssen Sie die asynchrone Lademethode zur Verarbeitung manuell aufrufen 🎜> Bringen Sie die Suchparameter in den Hintergrund, indem Sie Werte im otherParam-Array festlegen (wenn keine Parameter vorhanden sind, muss otherParam auf ein leeres Array gesetzt werden, andernfalls werden die vorherigen Parameter in der Rückruffunktion onNodeCreated immer in den Hintergrund gebracht). Nachdem der Knoten erstellt wurde, führen Sie ein manuelles asynchrones Laden durch.

Der Code lautet wie folgt:

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");
 } 
};

Das Obige dreht sich alles um die asynchrone Suche mit jquery ztree. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.