<!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-1.4.4.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>
<table>
<tr>
<td class="title"><a href="javascript:void(0)">test1</a></td>
<td class="filePath">
n1/n1.n1/n1.n1.n1/n1.n1.n1.n3<br>
n3/n3.n2
</td>
</tr>
<tr>
<td class="title"><a href="javascript:void(0)">test2</a></td>
<td class="filePath">
n1/n1.n1/n1.n1.n1/n1.n1.n1.n4<br>
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
}
};

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).text().trim().split('\n');
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) {
}
//-->
</SCRIPT>

<SCRIPT type="text/javascript">
<!--
var filterFilePathArray = [];

$(document).ready(function(){
$(".title a").click(function(){
filterFilePathArray = [];
var filePathArray = $(this).parents(".title").siblings(".filePath").text().trim().split('\n');
filePathArray.forEach(function(filePath){
filePath = filePath.trim();
filterFilePathArray.push(filePath);
});

zTreeObj.destroy();
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);
});
});
//-->
</SCRIPT>
</BODY>
</HTML>

ztree-demo的更多相关文章

  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. Silverlight 后台设置 button 纯色背景

    silverlight Button直接设置其background为某一颜色往往达不到效果.因为其内置模板把按钮背景弄成一个渐变画刷.所以想要纯色的背景就修改其模板. 在后台修改模板的代码如下: St ...

  2. html5定位getLocation()

    HTML5 Geolocation API 用于获得用户的地理位置. 如果用户不允许定位,那么用户信息是不可用的. 获取用户的位置:getCurrentPosition() 返回数据如下 返回用户当前 ...

  3. 懒加载（getter\setter理解）

    为什么要用懒加载 1.首先看一下程序启动过程:(如图) 会有一个mian的设置,程序一启动会加载main.storyboard main.storyboard又会加载箭头所指的控制器 控制器一旦加载, ...

  4. Nginx配置SSL证书部署HTTPS网站

    1.购买ssl证书 购买网站:沃通 2.上传证书到nginx服务器,然后进行解压. 解压后的的效果: [root@bubidev-ng3 nginx]# pwd/etc/nginx [root@bub ...

  5. ubuntu修改163软件源

    cd /etc/apt cat sources.list sudo su root sudo echo '' > sources.list nano sources.list 复制163软件源 ...

  6. HDU 4081Qin Shi Huang's National Road System（次小生成树）

    题目大意: 有n个城市,秦始皇要修用n-1条路把它们连起来,要求从任一点出发,都可以到达其它的任意点.秦始皇希望这所有n-1条路长度之和最短.然后徐福突然有冒出来,说是他有魔法,可以不用人力.财力就变 ...

  7. Mysql 查看、创建、更改 数据库和表

    一.一探究竟 我想看看有多少个数据库,有多少个表,以及表里有啥东西.那么你可以这样: 图形界面: 命令: 查看多少个数据库:注意 后面带s #查看 SHOW DATABASES; #查看表 USE b ...

  8. 【原创】PageAdminCMS 前台SQL注入漏洞（2）

    之前根据公司的要求找了几个web程序的漏洞提交CNVVD,发现漏洞提交上去两个月了,CNVVD却没有任何回应,我提交的这几个漏洞却悄悄的修补掉了. 文章作者:rebeyond 受影响版本:V3.0 漏 ...

  9. JavaWeb学习笔记——过滤器

    JSP可以完成的功能Servlet都可以完成,但是Servlet具备的很多功能是JSP所不具备的. 从使用上来看,Servlet可以分成简单Servlet.过滤Servlet(过滤器)和监听Servl ...

  10. Python 下载 tushare 数据，然后调用 C++ DLL 计算 wMA 存入本地 csv 文件再 python 读取

    CMakeLists.txt project(wMA) add_library(wMA SHARED wMA.cpp) wMA.h #pragma once #ifndef WMA_WMA_H #de ...