JQuery ztree dengan penapisan dan pemuatan tak segerak examples

Rumah

hujung hadapan web

tutorial js

JQuery ztree dengan penapisan dan pemuatan tak segerak examples_jquery

May 16, 2016 pm 03:13 PM

jquery

Artikel ini berkongsi contoh JQuery ztree dengan penapisan dan pemuatan tak segerak untuk rujukan anda. Kandungan khusus adalah seperti berikut

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

Salin selepas log masuk

Operasi fungsi khusus:

Cari jawatankuasa perbandaran:

Di atas ialah ztree dengan fungsi penapisan dan pemuatan tak segerak, saya harap anda dapat memahami dengan mendalam tentang ztree melalui artikel terbaru.

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn