jquery ztree asynchronous search (leaf search) practice

jquery ztree asynchronous search (leaf search) practice_jquery

WBOY

Release： 2016-05-16 15:13:41

Original

1450 people have browsed it

1. Initial asynchronous loading tree

The initialization gives a root node by default, and then combines the asynchronous loading method to manually trigger the default loading of the first layer, as shown in the figure:

The code is as follows:

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

Copy after login

2. Asynchronous search for leaf nodes

When using JQuery ZTREE, you may need to use asynchronous fuzzy search for leaf nodes, as shown in the figure:

If you only use ZTREE’s own expansion method zTreeObj.expandNode, it will only expand the change point and cannot trigger asynchronous loading. At this time, you must manually call the asynchronous loading method for processing. The solution is as follows:
Bring the search parameters to the background by setting values in the otherParam array (when there are no parameters, otherParam must be set to an empty array, otherwise the previous parameters will always be brought to the background); in the callback function onNodeCreated after the node is created Perform manual asynchronous loading.

The code is as follows:

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

Copy after login

The above is all about jquery ztree asynchronous search. I hope it will be helpful to everyone's learning.