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