ztree-demo

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

时间: 2024-10-17 15:40:56

ztree-demo的相关文章

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

最近有个项目要用ztree,需要用ztree自带的功能(增删改),也需要自定义DOM的功能(置顶). ztree的demo里有增删改的demo,也有自定义DOM的demo,但没有两者结合的. 所以我把demo改了一下,两个功能合在了一起. 上代码. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - edit</TITLE> <meta http-equiv="content-ty

zTree更新自定义标签&gt;&gt;&gt;

zTree>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> x 本来想自己敲一个zTree的例子的>>> 但是一想zTree文档做的这么好,直接拷贝过来一个得了... 哈哈>>> <!DOCTYPE html> <html> <head> <

zTree

js树形控件—zTree使用总结 0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 zTree的特点 最新版的zTree将核心代码按照功能进行了分割,不需要的代码可以不用加载,如普通使用只需要加载核心的jquery.ztree.core-3.5.js,需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js,需要使用编辑功

可编辑ztree节点的增删改功能图标控制---已解决

<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRemove / onRemove / beforeRename / onRename</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <l

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

上一次老师让我们用递归将中国城市镇县四级联动 显示在树上,那个时候就知道可以显示在zTree上,可是苦于对Json的不了解,对zTree的Api的不了解,一直没有做出来,只好将递归算法显示在了窗体上,见C# 使用winForm的TreeView显示中国城镇四级联动, 前几天老师终于将他以前做的zTree的例子给我研究,终于知道了怎么写了(哭瞎,好没有成就感),感觉网上这部分资源好少,有也是关于SqlServer用EntityFramework中数据上下文写的,由于老师不让用EntityFrame

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

Demo 这绝对是我见过最完美的tree了,尽管是国产货,但一点不输国外产品,国外的还没有见过这么强的. __________________________________________________________________________________ 以下是简单的使用demo: <!DOCTYPE html> <html> <head> <title>ZTREE DEMO - Standard Data </title> &l

zTree使用总结

原地址 想要使用zTree实现的效果如下: 即当鼠标点击进入文本框时,即通过ashx文件访问数据库后弹出zTree信息框.当点击窗口其他区域时此信息框隐藏.在这里,访问数据库的代码省略. 具体实现的代码如下: [html] view plain copy <!DOCTYPE html> <html> <head> <title>ZTREE DEMO </title> <meta http-equiv="content-type&q

zTree 树形控件 ajax动态加载数据

很久没搞过树形控件了 , 再次接触看官网文档有点没懂,于是在网上找了个代码copy上,但数据是写死的,就想这在用ajax异步取出数据替换,下面是js代码 <SCRIPT type="text/javascript" > //定义全局ztree数据 var zNodes; /* 初始化ztree数据 */ function initZtree(){ $.ajax({ type: "GET", url: "<%=request.getCont

使用zTree插件构建树形菜单

zTree下载:https://github.com/zTree/zTree_v3 目录: 就我看来,zTree较为实用的有以下几点: zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 支持 JSON 数据 支持静态 和 Ajax 异步加载节点数据 支持任意更换皮肤 / 自定义图标 支持极其灵活的 checkbox 或 radio 选择功能 提供多种事件响应回调 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可

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

第一步.前台HTML页面. 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="feeClassification.aspx.cs" Inherits="Webs.pages.Parameter.feeClassification" %> 2 3 <!DOCTYPE html> 4 <html lang="en-us&q