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