フィルタリングと非同期読み込みを備えた JQuery ztree の例

ホームページ

ウェブフロントエンド

jsチュートリアル

フィルタリングと非同期読み込みを備えた JQuery ztree の例_jquery

May 16, 2016 pm 03:13 PM

jquery

この記事では、参考のためにフィルタリングと非同期ロードを備えた JQuery ztree の例を共有します。具体的な内容は次のとおりです。

&lt;html&gt;
&lt; head&gt;
&lt; base href="&lt;%=basePath%&gt;"&gt;
&lt;title&gt;My JSP 'ztree.jsp' starting page&lt;/title&gt;
&lt;link rel="stylesheet" href="zTrees/css/zTreeStyle/zTreeStyle.css"
 type="text/css"&gt;
&lt; script type="text/javascript" src="zTrees/js/jquery-1.4.4.min.js"&gt;&lt;/script&gt;
&lt; script type="text/javascript" src="zTrees/js/jquery.ztree.core-3.5.js"&gt;&lt;/script&gt;
&lt; script type="text/javascript"
 src="zTrees/js/jquery.ztree.excheck-3.5.js"&gt;&lt;/script&gt;
&lt; script type="text/javascript"
 src="zTrees/js/jquery.ztree.exedit-3.5.js"&gt;&lt;/script&gt;
&lt; script type="text/javascript"
 src="zTrees/js/jquery.ztree.exhide-3.5.js"&gt;&lt;/script&gt;
&lt; SCRIPT type="text/javascript"&gt;
 $(function() {
  var setting = {
  async : { //异步加载
  type : "post",
   enable : true,
   url : getUrl
  },
  check : {
   enable : true
  },
  data : {
   simpleData : {
   enable : true
   }
  },
  callback : {
  onClick : nodeClick,
   onCheck : nodeCheck
  }
  };
  $.fn.zTree.init($("#treeDemo"), setting);
 });
 //返回地址 
 function getUrl(treeId, treeNode) {
  return "***.do&#63;method=listXMLTree&****Sid=100";
 }
 //单击节点
 function nodeClick(event, treeId, treeNode) {
  //alert(treeId+treeNode.id+treeNode.mobileNO);
  var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
  var sNodes = treeObj.getSelectedNodes();
  if (sNodes.length&gt; 0) {
  if (!treeNode.isParent) {
  $.ajax({
   type : 'POST',
   url : '***.do&#63;method=listXMLChildren',
   data : {'****Sid' : treeNode.id},
   dataType : 'text',
   async : false,
   success : function(dat) {
   var dats = eval(dat);
   if (dats.length != 0) {
    //var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    //treeObj.addNodes(treeNode, dats);
    treeObj.addNodes(treeNode, dats);
    }
   }
  });
  } else {
    treeObj.expandNode(treeNode);
  }
  }
 }
 //选中节点
 function nodeCheck(event, treeId, treeNode) {
  var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
  nodes = treeObj.getCheckedNodes(true);
  var str = "";
  for ( var i = 0, l = nodes.length; i &lt; l; i++) {
  //alert(nodes[i].id + nodes[i].mobileNO);
  if (nodes[i].mobileNO != null) {
   str += nodes[i].name + ":" + nodes[i].mobileNO + ";";
  }
  }
  $('#mtDstName').val(str);
 }
 //监听搜索框
 $(function() {
  $('#sch').bind('input propertychange', function() {
  var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
  var value = $('#sch').val();
  nodeList = treeObj.getNodesByParamFuzzy('name', value);
  nodes = treeObj.getNodes();
  treeObj.hideNodes(nodes[0].children);
  treeObj.showNodes(nodeList);
  });
 });
 
&lt; /SCRIPT&gt;
&lt; /head&gt;
&lt; body&gt;
 搜索:&lt;input type="text" id="sch"&gt;
 &lt;!-- &lt; input type="button" id="btnSch" value="搜索"&gt;--&gt;
 &lt;br&gt; 树状：
 &lt;div style="height:300px;width:200px;"&gt;
 &lt;ul id="treeDemo" class="ztree"&gt;&lt;/ul&gt;
 &lt;/div&gt;
 &lt;div align="center"&gt;
  名单：
 &lt;textarea id="mtDstName" name="mtDstName" readonly&gt;&lt;/textarea&gt;
 &lt;/div&gt;
&lt; /body&gt;
&lt; /html&gt;

ログイン後にコピー

特定の関数の操作: