1、demo地址 http://www.ztree.me/v3/demo.php#_108
2、前台页面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path=request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path; %> <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>功能管理</title> <link rel="stylesheet" href="<%=basePath %>/js/zTree_v3/css/demo.css" type="text/css"> <link rel="stylesheet" href="<%=basePath %>/js/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css"> <script src='<%=basePath %>/js/jquery/jquery-2.1.4.min.js' type="text/javascript"></script> <script type="text/javascript" src="<%=basePath %>/js/zTree_v3/js/jquery.ztree.core-3.5.js"></script> <script type="text/javascript" src="<%=basePath %>/js/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script> <script type="text/javascript" src="<%=basePath %>/js/zTree_v3/js/jquery.ztree.exedit-3.5.js"></script> <script type="text/javascript" src="<%=basePath %>/js/zTree_v3/js/jquery.ztree.exhide-3.5.js"></script> <script type="text/javascript" src="<%=basePath %>/js/layer-v1.8.5/layer.min.js"></script> <style type="text/css"> .ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle} </style> <!-- Add code to initialize the tree when the document is loaded: --> <script type="text/javascript"> var setting = { view: { addHoverDom: addHoverDom, removeHoverDom: removeHoverDom, selectedMulti: false }, edit: { enable: true, editNameSelectAll: true, showRemoveBtn: showRemoveBtn, showRenameBtn: showRenameBtn, removeTitle: "删除", renameTitle: "重命名", }, async: { //返回的json格式:[{"isParent":true,"id":"e831e160f62811e48087b888e32eee38","name":"网站地图","parentId":"0"}]} enable: true, url:"<%=basePath %>/fun/getChildren.do", autoParam:["id"], dataFilter: filter }, callback: { beforeDrag: beforeDrag, beforeEditName: beforeEditName, beforeRemove: beforeRemove, beforeRename: beforeRename, onRemove: onRemove, onRename: onRename } }; function filter(treeId, parentNode, childNodes) { childNodes = childNodes.replace('father','isParent'); var jsonObj = JSON.parse(childNodes); childNodes=jsonObj["list"]; if (!childNodes) return null; for (var i=0, l=childNodes.length; i<l; i++) { childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.'); } return childNodes; } var log, className = "dark"; function beforeDrag(treeId, treeNodes) { return false; } function beforeEditName(treeId, treeNode) { className = (className === "dark" ? "":"dark"); showLog("[ "+getTime()+" beforeEditName ] " + treeNode.name); var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.selectNode(treeNode); return confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗?"+treeNode.id); } function beforeRemove(treeId, treeNode) { className = (className === "dark" ? "":"dark"); showLog("[ "+getTime()+" beforeRemove ] " + treeNode.name); var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.selectNode(treeNode); var f = confirm("确认删除 节点 -- " + treeNode.name + " 吗?"+treeNode.id); if(f){ $.ajax({ type: "POST", url: "<%=basePath %>/fun/del.do", data: {"pkGlobalId":treeNode.id}, dataType : "json", success:function(data){ if(data!=0){ f=true; alert("删除成功"); }else{ f=false; } } }); } return f; } function onRemove(e, treeId, treeNode) { showLog("[ "+getTime()+" onRemove ] " + treeNode.name); } function beforeRename(treeId, treeNode, newName, isCancel) { className = (className === "dark" ? "":"dark"); showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" beforeRename ] " + treeNode.name + (isCancel ? "</span>":"")); if (newName.length == 0) { alert("节点名称不能为空."); var zTree = $.fn.zTree.getZTreeObj("treeDemo"); setTimeout(function(){zTree.editName(treeNode)}, 10); return false; } return true; } function onRename(e, treeId, treeNode, isCancel) { alert(treeNode.level+"主键为【"+treeNode.id+"】的标签名称修改为了【"+treeNode.name+"】,需要向后台发送请求"); //showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" onRename ] " + treeNode.name + (isCancel ? "</span>":"")); $.ajax({ type: "POST", url: "<%=basePath %>/fun/update.do", data: {"name":treeNode.name,"pkGlobalId":treeNode.id}, dataType : "json", success:function(data){ if(data==1){ alert("修改成功"); } } }); } function showRemoveBtn(treeId, treeNode) { var flag=true; if(treeNode.level==0){ //是第一个节点 flag=false; } /* if(treeNode.isLastNode){ //是最后一个节点 flag=false; } */ return flag; } function showRenameBtn(treeId, treeNode) { var flag=true; if(treeNode.level==0){ //是第一个节点 flag=false; } return flag; } function showLog(str) { if (!log) log = $("#log"); log.append("<li class='"+className+"'>"+str+"</li>"); if(log.children("li").length > 8) { log.get(0).removeChild(log.children("li")[0]); } } function getTime() { var now= new Date(), h=now.getHours(), m=now.getMinutes(), s=now.getSeconds(), ms=now.getMilliseconds(); return (h+":"+m+":"+s+ " " +ms); } var newCount = 1; function addHoverDom(treeId, treeNode) { var sObj = $("#" + treeNode.tId + "_span"); if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return; var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='新增' onfocus='this.blur();'></span>"; sObj.after(addStr); var btn = $("#addBtn_"+treeNode.tId); if (btn) btn.bind("click", function(){ alert("单击了新增"); var zTree = $.fn.zTree.getZTreeObj("treeDemo"); $.layer({ type: 2, shade: [0], fix: false, title: '新增', maxmin: true, iframe: {src : '<%=basePath %>/func/addNewFun.jsp?parentId='+treeNode.id}, area: ['400px' , '240px'], closeBtn: [0, true], close: function(index){ var name = layer.getChildFrame('#name', index).val(); $.ajax({ type: "POST", url: "<%=basePath %>/fun/add.do", data: {"name":name,"parentId":treeNode.id}, dataType : "json", success:function(data){ data= JSON.parse(data); if(data.flag){ zTree.addNodes(treeNode, {id:data.msg, pId:treeNode.id, name:name}); return false; } } }); } }); }); }; function removeHoverDom(treeId, treeNode) { $("#addBtn_"+treeNode.tId).unbind().remove(); }; function selectAll() { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked"); } function refreshNode(e) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), type = e.data.type, silent = e.data.silent, nodes = zTree.getSelectedNodes(); if (nodes.length == 0) { alert("请先选择一个父节点"); } for (var i=0, l=nodes.length; i<l; i++) { zTree.reAsyncChildNodes(nodes[i], type, silent); if (!silent) zTree.selectNode(nodes[i]); } } $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting); $("#refreshNode").bind("click", {type:"refresh", silent:false}, refreshNode); $("#refreshNodeSilent").bind("click", {type:"refresh", silent:true}, refreshNode); $("#addNode").bind("click", {type:"add", silent:false}, refreshNode); $("#addNodeSilent").bind("click", {type:"add", silent:true}, refreshNode); }); </script> </head> <body> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> </body> </html>