<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Async</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/demo.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="js/jquery.ztree.exedit.js"></script>
</HEAD> <BODY>
<ul id="treeDemo" class="ztree"></ul>
<button type="button" class="save">保存</button>
<table>
<tr data_id="1">
<td class="title"><a href="javascript:void(0)" class="update">修改</a><a href="javascript:void(0)" class="delete">删除</a></td>
<td class="filePath">n1/n1.n1/n1.n1.n1/n1.n1.n1.n3<br>n3/n3.n2</td>
</tr>
<tr data_id="2">
<td><a href="javascript:void(0)" class="update">修改</a><a href="javascript:void(0)" class="delete">删除</a></td>
<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>
</tr>
</table> <SCRIPT type="text/javascript">
<!--
var setting = {
check: {
enable: true
},
async: {
enable: true,
url:"demo/cn/asyncData/getNodes.php",
autoParam:["id", "name=n", "level=lv"],
otherParam:{"otherParam":"zTreeAsyncTest"},
dataFilter: filter
},
callback: {
onAsyncSuccess: onAsyncSuccess,
onExpand: onExpand,
onCheck: onCheck,
onNodeCreated: onNodeCreated
}
}; var zTreeObj;
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);
}); function filter(treeId, parentNode, childNodes) {
if (!childNodes)
return null;
childNodes.forEach(function(childNode){
// 计算路径
var path = '';
if(!parentNode){
path = childNode.name;
}else{
path = parentNode.filePath + '/' + childNode.name;
}
childNode.filePath = path; // 判断是否已选中
var checked = false;
var halfCheck = false;
var chkDisabled = false;
$(".filePath").each(function(i, item){
var filePathArray = $(item).html().trim().split('<br>');
filePathArray.forEach(function(filePath){
filePath = filePath.trim();
if(filePath == childNode.filePath){// 全匹配(叶节点)
checked = true;
if(jQuery.inArray(filePath,filterFilePathArray) < 0){
chkDisabled = true;
}
}else if(filePath.indexOf(childNode.filePath) == 0){// 部分匹配(父节点)
checked = true;
// halfCheck = true;
}
});
});
childNode.checked = checked;
childNode.halfCheck = halfCheck;
childNode.chkDisabled = chkDisabled;
});
return childNodes;
} function onAsyncSuccess(event, treeId, treeNode, msg) {
console.log(treeNode);
} function onExpand(event, treeId, treeNode) {
// console.log(treeNode);
}; function onCheck(event, treeId, treeNode) {
// console.log(treeNode);
}; function onNodeCreated(event, treeId, treeNode) {
if(treeNode.checked){
zTreeObj.expandNode(treeNode, true, false, false, false);
}
};
//-->
</SCRIPT> <SCRIPT type="text/javascript">
<!--
var filterFilePathArray = [];
var nowUpdateIndex = -1; $(document).on("click", ".delete", function(){
$(this).parents("tr").remove(); zTreeObj.destroy();
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);
}); $(document).on("click", ".update", function(){
nowUpdateIndex = $(this).parents("tr").attr("data_id"); filterFilePathArray = [];
var filePathArray = $(this).parents("td").siblings(".filePath").text().html().split('<br>');
filePathArray.forEach(function(filePath){
filePath = filePath.trim();
filterFilePathArray.push(filePath);
}); zTreeObj.destroy();
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);
}); $(document).on("click", ".save", function(){
var str = '';
var nodes = zTreeObj.getCheckedNodes();
if(!!nodes){
var i = 0;
nodes.forEach(function(node){
if(!node.isParent){
if(i == 0){
str = node.filePath;
}else{
str = str + '<br>' + node.filePath;
}
i++;
}
});
} if(str==''){
return;
} if(nowUpdateIndex<=0){
var id = $("tr").length + 1;
id = id + '.' + Math.floor(Math.random()*100+1);
$("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>");
}else{
$("<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+"']");
} zTreeObj.destroy();
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);
});
//-->
</SCRIPT>
</BODY>
</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. Python文本处理nltk基础

    自然语言处理 -->计算机数据 ,计算机可以处理vector,matrix 向量矩阵. NLTK 自然语言处理库,自带语料,词性分析,分类,分词等功能. 简单版的wrapper,比如textbl ...

  2. 被误解的MVC和被神化的MVVM(转)

    转载自:http://www.infoq.com/cn/articles/rethinking-mvc-mvvm 原文作者:唐巧 被误解的 MVC MVC 的历史 MVC,全称是 Model View ...

  3. iOS之UITableView组头组尾视图/标题悬停

    最近笔者在公司的iOS开发中,有一个iOS开发同事跑来问了两个问题:1.给UITableView设置了组头和组尾视图,但是一直显示不出来?2.UITableView的section的header和fo ...

  4. 关于SharpDevelop 4版本以上没有ILAsm模板项目问题

    学习CIL的时候遇到的问题,记录一下. 查了一下英文网站,SharpDevelop 3 版本有ILAsm模板,但是有人运行3版本的CIL项目有问题. 说明一下SharpDevelop 4版本添加ILA ...

  5. Eclipse安装scala

    Scala官方提供了三种插件,分别支持Eclipse.NetBeans和Intellij IDEA开发环境.要在Eclipse IDE下安装Scala插件:选择Eclipse的菜单项Help--> ...

  6. Chrome 开发工具之Timeline

    之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline更多的是用在性能优化方面,它的作用就是记录与分析应用程 ...

  7. react 犯错

    1. import a from  './xx'  一定要有 ./ 2. export default const x={} 错 改为  const x={}; export default x; 也 ...

  8. Python Day12

    MySQL 数据库介绍 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库, 每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 我们 ...

  9. nginx配置杂记

    1.一个接口的形式要求是:IP+端口,并且通信协议类型是:https,如何做域名解析: ①设置一个端口.同时在防火墙中打开这个端口,重启防火墙: ②在服务器上/etc/nginx/conf.d的目录下 ...

  10. 拖动对象ondrag

    说明: 在进行拖放操作时,dataTransfer 对象用来保存被拖动的数据.它可以保存一项或多项数据.一种或者多种数据类型.dataTransfer对象有两个主要的方法:getData()方法和se ...