cari

Rumah >hujung hadapan web >tutorial js >JQuery ztree dengan penapisan dan pemuatan tak segerak examples_jquery

JQuery ztree dengan penapisan dan pemuatan tak segerak examples_jquery

WBOY
WBOYasal
2016-05-16 15:13:471324semak imbas

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

<html>
< head>
< base href="<%=basePath%>">
<title>My JSP 'ztree.jsp' starting page</title>
<link rel="stylesheet" href="zTrees/css/zTreeStyle/zTreeStyle.css"
 type="text/css">
< script type="text/javascript" src="zTrees/js/jquery-1.4.4.min.js"></script>
< script type="text/javascript" src="zTrees/js/jquery.ztree.core-3.5.js"></script>
< script type="text/javascript"
 src="zTrees/js/jquery.ztree.excheck-3.5.js"></script>
< script type="text/javascript"
 src="zTrees/js/jquery.ztree.exedit-3.5.js"></script>
< script type="text/javascript"
 src="zTrees/js/jquery.ztree.exhide-3.5.js"></script>
< SCRIPT type="text/javascript">
 $(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> 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 < 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);
  });
 });
 
< /SCRIPT>
< /head>
< body>
 搜索:<input type="text" id="sch">
 <!-- < input type="button" id="btnSch" value="搜索">-->
 <br> 树状：
 <div style="height:300px;width:200px;">
 <ul id="treeDemo" class="ztree"></ul>
 </div>
 <div align="center">
  名单：
 <textarea id="mtDstName" name="mtDstName" readonly></textarea>
 </div>
< /body>
< /html>

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：
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
Artikel sebelumnya：3 cara untuk mengoptimumkan kod Node.js yang anda tidak tahu_node.jsArtikel seterusnya：3 cara untuk mengoptimumkan kod Node.js yang anda tidak tahu_node.js

Artikel berkaitan

Lihat lagi