来自 美高梅4858永利777 2020-01-04 14:46 的文章
当前位置: 美高梅游戏平台网站 > 美高梅4858永利777 > 正文

JQuery ztree带筛选、异步加载实例讲解,jqueryztree

本文实例分享了JQuery ztree带筛选、异步加载实例,供大家参考,具体内容如下

JQuery ztree带筛选、异步加载实例讲解,jqueryztree

本文实例分享了JQuery ztree带筛选、异步加载实例,供大家参考,具体内容如下

<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?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?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>

具体功能操作:

图片 1

搜索市委:

图片 2

以上就是带筛选、异步加载功能的ztree,希望大家通过最近几篇文章,对ztree有了深入的了解。

< head>< base href="">My JSP 'ztree.jsp' starting page< script type="text/javascript" src="zTrees/js/jquery-1.4.4.min.js">< script type="text/javascript" src="zTrees/js/jquery.ztree.core-3.5.js">< script type="text/javascript" src="zTrees/js/jquery.ztree.excheck-3.5.js">< script type="text/javascript" src="zTrees/js/jquery.ztree.exedit-3.5.js">< script type="text/javascript" src="zTrees/js/jquery.ztree.exhide-3.5.js">< SCRIPT type="text/javascript"> $ { var setting = { async : { //异步加载 type : "post", enable : true, url : getUrl }, check : { enable : true }, data : { simpleData : { enable : true } }, callback : { onClick : nodeClick, onCheck : nodeCheck } }; $.fn.zTree.init, setting); }); //返回地址 function getUrl { return "***.do?method=listXMLTree&****Sid=100"; } //单击节点 function nodeClick(event, treeId, treeNode) { //alert(treeId+treeNode.id+treeNode.mobileNO); var treeObj = $.fn.zTree.getZTreeObj; var sNodes = treeObj.getSelectedNodes(); if  { if  { $.ajax({ type : 'POST', url : '***.do?method=listXMLChildren', data : {'****Sid' : treeNode.id}, dataType : 'text', async : false, success : function { var dats = eval; if  { //var treeObj = $.fn.zTree.getZTreeObj; //treeObj.addNodes; treeObj.addNodes; } } }); } else { treeObj.expandNode; } } } //选中节点 function nodeCheck(event, treeId, treeNode) { var treeObj = $.fn.zTree.getZTreeObj; nodes = treeObj.getCheckedNodes; 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 + ";"; } } $.val; } //监听搜索框 $ { $.bind('input propertychange', function() { var treeObj = $.fn.zTree.getZTreeObj; var value = $; nodeList = treeObj.getNodesByParamFuzzy; nodes = treeObj.getNodes(); treeObj.hideNodes; treeObj.showNodes; < /SCRIPT>< /head>< body> 搜索:  
 树状:     名单:  < /body>< /html>

您可能感兴趣的文章:

  • jquery zTree异步加载简单实例分享
  • jquery ztree实现下拉树形框使用到了json数据
  • 推荐8款jQuery轻量级树形Tree插件
  • 轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
  • 轻松学习jQuery插件EasyUI EasyUI创建树形菜单
  • JQuery ztree 异步加载实例讲解
  • jquery zTree异步加载简单实例讲解
  • Jquery zTree 树控件异步加载操作
  • jQuery zTree加载树形菜单功能

http://www.bkjia.com/Javascript/1104404.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1104404.htmlTechArticleJQuery ztree带筛选、异步加载实例讲解,jqueryztree 本文实例分享了JQuery ztree带筛选、异步加载实例,供大家参考,具体内容如下 html head base...

本文由美高梅游戏平台网站发布于美高梅4858永利777,转载请注明出处:JQuery ztree带筛选、异步加载实例讲解,jqueryztree

关键词: