jquery ztree 비동기 검색(리프 검색) practice_jquery

1. 초기 비동기 로딩 트리

초기화에서는 기본적으로 루트 노드를 제공한 다음 그림과 같이 비동기 로딩 방법을 결합하여 첫 번째 레이어의 기본 로딩을 수동으로 트리거합니다.

코드는 다음과 같습니다.

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. 리프 노드에 대한 비동기 검색

JQuery ZTREE를 사용할 때 그림과 같이 리프 노드에 대해 비동기 퍼지 검색을 사용해야 할 수도 있습니다.

ZTREE의 자체 확장 방법인 zTreeObj.expandNode만 사용하는 경우 변경 지점만 확장되며 비동기 로딩을 트리거할 수 없습니다. 이때 처리를 위해 비동기 로딩 방법을 수동으로 호출해야 합니다.
otherParam 배열에 값을 설정하여 검색 매개변수를 백그라운드로 가져옵니다(매개변수가 없는 경우 otherParam을 빈 배열로 설정해야 합니다. 그렇지 않으면 이전 매개변수는 항상 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");
 //只有搜索参数不为空且该节点为父节点时才进行异步加载
 if(param != "" && treeNode.isParent){
  treeObj.reAsyncChildNodes(treeNode, "refresh");
 } 
};

위 내용은 모두 jquery ztree 비동기 검색에 관한 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.