1. <!DOCTYPE html>
  2. <HTML>
  3. <HEAD>
  4.     <TITLE> ZTREE DEMO - Async</TITLE>
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.     <link rel="stylesheet" href="css/demo.css" type="text/css">
  7.     <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
  8.     <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
  9.     <script type="text/javascript" src="js/jquery.ztree.core.js"></script>
  10.     <script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
  11.     <script type="text/javascript" src="js/jquery.ztree.exedit.js"></script>
  12. </HEAD>
  13.  
  14. <BODY>
  15.     <ul id="treeDemo" class="ztree"></ul>
  16.     <button type="button" class="save">保存</button>
  17.     <table>
  18.         <tr data_id="1">
  19.             <td class="title"><a href="javascript:void(0)" class="update">修改</a><a href="javascript:void(0)" class="delete">删除</a></td>
  20.             <td class="filePath">n1/n1.n1/n1.n1.n1/n1.n1.n1.n3<br>n3/n3.n2</td>
  21.         </tr>
  22.         <tr data_id="2">
  23.             <td><a href="javascript:void(0)" class="update">修改</a><a href="javascript:void(0)" class="delete">删除</a></td>
  24.             <td class="filePath">n1/n1.n1/n1.n1.n1/n1.n1.n1.n4<br>n3/n3.n3/n3.n3.n1/n3.n3.n1.n2</td>
  25.         </tr>
  26.     </table>
  27.  
  28.     <SCRIPT type="text/javascript">
  29.         <!--
  30.         var setting = {
  31.             check: {
  32.                 enable: true
  33.             },
  34.             async: {
  35.                 enable: true,
  36.                 url:"demo/cn/asyncData/getNodes.php",
  37.                 autoParam:["id", "name=n", "level=lv"],
  38.                 otherParam:{"otherParam":"zTreeAsyncTest"},
  39.                 dataFilter: filter
  40.             },
  41.             callback: {
  42.                 onAsyncSuccess: onAsyncSuccess,
  43.                 onExpand: onExpand,
  44.                 onCheck: onCheck,
  45.                 onNodeCreated: onNodeCreated
  46.             }
  47.         };
  48.  
  49.         var zTreeObj;
  50.          $(document).ready(function(){
  51.             zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);
  52.         });
  53.  
  54.         function filter(treeId, parentNode, childNodes) {
  55.             if (!childNodes)
  56.                 return null;
  57.             childNodes.forEach(function(childNode){
  58.                 // 计算路径
  59.                 var path = '';
  60.                 if(!parentNode){
  61.                     path = childNode.name;
  62.                 }else{
  63.                     path = parentNode.filePath + '/' + childNode.name;
  64.                 }
  65.                 childNode.filePath = path;
  66.  
  67.                 // 判断是否已选中
  68.                 var checked = false;
  69.                 var halfCheck = false;
  70.                 var chkDisabled = false;
  71.                 $(".filePath").each(function(i, item){
  72.                     var filePathArray = $(item).html().trim().split('<br>');
  73.                     filePathArray.forEach(function(filePath){
  74.                         filePath = filePath.trim();
  75.                         if(filePath == childNode.filePath){// 全匹配（叶节点）
  76.                             checked = true;
  77.                             if(jQuery.inArray(filePath,filterFilePathArray) < 0){
  78.                                 chkDisabled = true;
  79.                             }
  80.                         }else if(filePath.indexOf(childNode.filePath) == 0){// 部分匹配（父节点）
  81.                             checked = true;
  82.                             // halfCheck = true;
  83.                         }
  84.                     });
  85.                 });
  86.                 childNode.checked = checked;
  87.                 childNode.halfCheck = halfCheck;
  88.                 childNode.chkDisabled = chkDisabled;
  89.             });
  90.             return childNodes;
  91.         }
  92.  
  93.         function onAsyncSuccess(event, treeId, treeNode, msg) {
  94.             console.log(treeNode);
  95.         }
  96.  
  97.         function onExpand(event, treeId, treeNode) {
  98.             // console.log(treeNode);
  99.         };
  100.  
  101.         function onCheck(event, treeId, treeNode) {
  102.             // console.log(treeNode);
  103.         };
  104.  
  105.         function onNodeCreated(event, treeId, treeNode) {
  106.             if(treeNode.checked){
  107.                 zTreeObj.expandNode(treeNode, true, false, false, false);
  108.             }
  109.         };
  110.         //-->
  111.     </SCRIPT>
  112.  
  113.     <SCRIPT type="text/javascript">
  114.         <!--
  115.         var filterFilePathArray = [];
  116.         var nowUpdateIndex = -1;
  117.  
  118.         $(document).on("click", ".delete", function(){
  119.             $(this).parents("tr").remove();
  120.  
  121.             zTreeObj.destroy();
  122.             zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);
  123.         });
  124.  
  125.         $(document).on("click", ".update", function(){
  126.             nowUpdateIndex = $(this).parents("tr").attr("data_id");
  127.  
  128.             filterFilePathArray = [];
  129.             var filePathArray = $(this).parents("td").siblings(".filePath").text().html().split('<br>');
  130.             filePathArray.forEach(function(filePath){
  131.                 filePath = filePath.trim();
  132.                 filterFilePathArray.push(filePath);
  133.             });
  134.  
  135.             zTreeObj.destroy();
  136.             zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);
  137.         });
  138.  
  139.         $(document).on("click", ".save", function(){
  140.             var str = '';
  141.             var nodes = zTreeObj.getCheckedNodes();
  142.             if(!!nodes){
  143.                 var i = 0;
  144.                 nodes.forEach(function(node){
  145.                     if(!node.isParent){
  146.                         if(i == 0){
  147.                             str = node.filePath;
  148.                         }else{
  149.                             str = str + '<br>' + node.filePath;
  150.                         }
  151.                         i++;
  152.                     }
  153.                 });
  154.             }
  155.  
  156.             if(str==''){
  157.                 return;
  158.             }
  159.  
  160.             if(nowUpdateIndex<=0){
  161.                 var id = $("tr").length + 1;
  162.                 id = id + '.' + Math.floor(Math.random()*100+1);
  163.                 $("table").append("<tr data_id='"+id+"'><td><a href='javascript:void(0)' class='update'>修改</a><a href='javascript:void(0)' class='delete'>删除</a></td><td class='filePath'>"+str+"</td></tr>");
  164.             }else{
  165.                 $("<tr data_id='"+nowUpdateIndex+"'><td><a href='javascript:void(0)' class='update'>修改</a><a href='javascript:void(0)'' class='delete'>删除</a></td><td class='filePath'>"+str+"</td></tr>").replaceAll("tr[data_id='"+nowUpdateIndex+"']");
  166.             }
  167.  
  168.             zTreeObj.destroy();
  169.             zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);
  170.         });
  171.         //-->
  172.     </SCRIPT>
  173. </BODY>
  174. </HTML>

ztree-demo 2的更多相关文章

  1. jQurey zTree Demo 3.5

    https://jeesite.gitee.io/front/jquery-ztree/3.5/demo/cn/index.html

  2. ztree : 增删改功能demo与自定义DOM功能demo的结合

    最近有个项目要用ztree,需要用ztree自带的功能(增删改),也需要自定义DOM的功能(置顶). ztree的demo里有增删改的demo,也有自定义DOM的demo,但没有两者结合的. 所以我把 ...

  3. js树形控件—zTree使用总结

    0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 ...

  4. zTree学习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 简单Ztree的实现————不连接数据库版

    Ztree可以去官网去下载相应的版本和API,我这里就简单的介绍下它的实现以及因为Ztree的小例子印发的Js问题,稍后我会在博客中写JS的异步问题, 我这里用的是MVC4.0,好了正文开始,上代码 ...

  6. 【zTree】 zTree使用的 小例子

    使用zTree树不是第一次了  但是 还是翻阅着之前做的 对照着 使用起来比较方便  这里就把小例子列出来   总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先  在 ...

  7. (菜鸟要飞系列)四，基于Asp.Net MVC5的后台管理系统（zTree绑定Json数据生成树）

    上一次老师让我们用递归将中国城市镇县四级联动 显示在树上,那个时候就知道可以显示在zTree上,可是苦于对Json的不了解,对zTree的Api的不了解,一直没有做出来,只好将递归算法显示在了窗体上, ...

  8. jquery——zTree, 完美好用的树插件

    Demo 这绝对是我见过最完美的tree了,尽管是国产货,但一点不输国外产品,国外的还没有见过这么强的. _______________________________________________ ...

  9. 使用zTree和json构建简单树节点

    我们经常碰到须要构建树结构展示的情况,我推荐使用zTree和JSON. 比如: <? php /** * * 使用zTree和json构建树节点 * */ $arr = array( 0=> ...

  10. 【Ztree】前台展示多级菜单，后台配置方法

    第一步.前台HTML页面. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=" ...

随机推荐

  1. 关于javascript的运动教程

    一.javascript的匀速运动 关于物体的javascript匀速运动要点分析: 1.物体关于运动的时候,我们要打开定时器 2.打开定时器的时候我们记得要在停止的时候关闭定时器,同时应该注意的是一 ...

  2. 安装cocoapods

    1. 看一下ruby的版本 ruby -v 2. 删除默认源 gem sources --remove https://rubygems.org/ 3. 添加淘宝源 gem sources -a ht ...

  3. HTML 字符实体 &lt; &gt: &amp;等

    在 HTML 中,某些字符是预留的. 在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签. 如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用 ...

  4. BZOJ 1711: [Usaco2007 Open]Dining吃饭

    1711: [Usaco2007 Open]Dining吃饭 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 902  Solved: 476[Submit ...

  5. Jackson 通过自定义注解来控制json key的格式

    Jackson 通过自定义注解来控制json key的格式 最近我这边有一个需求就是需要把Bean中的某一些特殊字段的值进行替换.而这个替换过程是需要依赖一个第三方的dubbo服务的.为了使得这个转换 ...

  6. Shell入门

    前言 日常用Python多一些,不过很多时候shell脚本更简单实用一些,所以有必要熟悉一下shell脚本.当然shell有他特定的一些场景,比方说我曾经改过一个vpn断线自动重连的脚本,简单实用. ...

  7. sql server中对xml进行操作

    一.前言 SQL Server 2005 引入了一种称为 XML 的本机数据类型.用户可以创建这样的表,它在关系列之外还有一个或多个 XML 类型的列:此外,还允许带有变量和参数.为了更好地支持 XM ...

  8. webapi-crud

  9. 使用ab对nginx进行压力测试

    nginx以高并发,省内存著称. 相信大多数安装nginx的同学都想知道自己的nginx性能如何. 我想跟大家分享下我使用ab工具的压力测试方法和结果, ab是针对apache的性能测试工具,可以只安 ...

  10. MTK MT33xx型GPS的NMEA协议解析实例

    1)解析实现 gps_main.c #include <nmea/nmea.h> #include <string.h> #include <stdio.h> #i ...