JQuery ztree avec filtrage et chargement asynchrone examples

Maison

interface Web

js tutoriel

JQuery ztree avec filtrage et chargement asynchrone examples_jquery

May 16, 2016 pm 03:13 PM

jquery

Cet article partage un exemple de JQuery ztree avec filtrage et chargement asynchrone pour votre référence. Le contenu spécifique est le suivant

&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;

Copier après la connexion

Opérations de fonctions spécifiques :

Recherche comité municipal :

Ce qui précède est ztree avec des fonctions de filtrage et de chargement asynchrone. J'espère que vous pourrez avoir une compréhension approfondie de ztree grâce aux articles récents.

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn