ztree+jsp实现的节点新增、修改、删除图标，以及提醒、jajx保存，还可以节点拖动
ztree+jsp实现的节点新增、修改、删除图标，以及提醒、jajx保存，还可以节点拖动
<%@ page contentType="text/html; charset=UTF-8" %>
<%
String path = request.getContextPath();
String code = request.getParameter("code");
code = "001003"; //综合查询
if(code==null)
code = "001";
%>
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Simple Data</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<SCRIPT type="text/javascript">
var contextpath = "<%=path%>";
</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>
<link href="<%=path %>/frameworks/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script src="<%=path %>/frameworks/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="<%=path %>/frameworks/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src="<%=path %>/frameworks/ligerUI/js/core/util.js" type="text/javascript"></script>
<script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
<script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
<script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerWindow.js" type="text/javascript"></script>
<script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
<link rel="stylesheet" href="<%=path %>/frameworks/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=path %>/frameworks/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="<%=path %>/frameworks/ztree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="<%=path %>/frameworks/ztree/jquery.ztree.exedit-3.5.js"></script>
<link href="<%=path %>/frameworks/main/treeManager.css" rel="stylesheet" type="text/css" />
<script src="<%=path %>/js/json2.js" type="text/javascript"></script>
<script src="<%=path %>/js/uuid.js" type="text/javascript"></script>
<SCRIPT type="text/javascript">
var code = "<%=code%>";
var listenerClass = "foresee.wtp.um.tree.TreeManagerHandler";
var url = contextpath+"/json";
var fheight = 300, fwidth = 650;
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
edit: {
enable: true,
editNameSelectAll: true,
showRemoveBtn: showRemoveBtn,
showRenameBtn: showRenameBtn
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag,
beforeEditName: beforeEditName,
beforeRemove: beforeRemove,
beforeRename: beforeRename,
onRemove: onRemove,
onRename: onRename
}
};
function showLog(str) {
}
var newCount = 1,curTreeNode;
function addHoverDom(treeId, treeNode) {
curTreeNode = treeNode;
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.id
+ "' title='add node' onfocus='this.blur();'></span>";
sObj.after(addStr);
//绑定新增按钮事件
var btn = $("#addBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){
//找出新增按钮的left、top
var btnleft = btn.offset().left;
var btntop = btn.offset().top;
$.ligerDialog.open({ url: 'nodeForm.jsp', height: fheight,width: fwidth,title: '新增节点', modal: true,
left:btnleft, top:btntop,name:'nodeForm',
buttons: [ { text: '确定', onclick: function (item, dialog) {
//保存节点
saveNode(item, dialog, treeNode, 'add');
}
},
{ text: '取消', onclick: function (item, dialog) { dialog.close(); } } ]
});
return false;
});
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.id).unbind().remove();
};
//callback
function saveNode(item, dialog, treeNode,oper) //选择一笔,按确认按钮带回
{
var name = dialog.frame.$("#nodeNameTxt").val();
var code = dialog.frame.$("#nodeCodeTxt").val();
var url = dialog.frame.$("#urlTxt").val();
var openCode = dialog.frame.$("#openCodeTxt").val();
var folder = dialog.frame.$("input[name='folderOpt']:checked").val();
//alert("name: "+name+", code: "+code);
var param = {name:name,code:openCode,id:curTreeNode.id,type:'child',folder:folder,url:url,oper:oper};
ajaxcall(param, function(d) {
dialog.close();
//保存成功后，才将真正添加节点
d = d[0].data;
if(!d) return;
var zTree = $.fn.zTree.getZTreeObj("leftTree");
if(oper=='add') //新增节点
zTree.addNodes(treeNode, {id:d.id, pId:d.pId, name:d.name});
if(oper=='edit') {//重命名节点
treeNode.name = name;
//zTree.setNodeName(treeNode);
//zTree.editNode(setting, treeNode);
zTree.editName(treeNode);
zTree.cancelEditName();
}
}, oper=='add'?'addTreeNode':'updTreeNode');
}
var log, className = "dark";
function beforeDrag(treeId, treeNodes) {
return false;
}
function beforeEditName(treeId, treeNode) {
className = (className === "dark" ? "":"dark");
showLog("[beforeEditName ] " + treeNode.name);
var zTree = $.fn.zTree.getZTreeObj("leftTree");
zTree.selectNode(treeNode);
//查询选中的节点数据
var param = {id:treeNode.id};
ajaxcall(param, function(d) {
//保存成功后，才将真正添加节点
d = d[0].data.d;
if(!d) return;
//编辑按钮
var btn = $('#'+treeNode.tId+'_edit');
//找出新增按钮的left、top
var btnleft = btn.offset().left;
var btntop = btn.offset().top;
var url = 'nodeForm.jsp?name='+jsc.trim(d.name)+'&url='+jsc.trim(d.url)+'&code='+jsc.trim(d.code)+'&openCode='+jsc.trim(d.openCode);
$.ligerDialog.open({ url: url, height: fheight,width: fwidth,title: '修改节点', modal: true,
left:btnleft, top:btntop,name:'nodeForm',
buttons: [ { text: '确定', onclick: function (item, dialog) {
//保存节点
saveNode(item, dialog, treeNode,'edit');
}
},
{ text: '取消', onclick: function (item, dialog) { dialog.close(); } } ]
});
}, 'getNodeData');
return false;
}
function beforeRemove(treeId, treeNode) {
className = (className === "dark" ? "":"dark");
var zTree = $.fn.zTree.getZTreeObj("leftTree");
zTree.selectNode(treeNode);
//alert(JSON.stringify(treeNode));
if(confirm("确认删除 节点 -- " + treeNode.name + " 吗？")) {
var param = {id:treeNode.id,sclx:'qzsc'};
ajaxcall(param, function(d) {
//保存成功后，才将真正添加节点
var nodes = zTree.getSelectedNodes();
zTree.removeNode(nodes[0]);
}, "delTreeData");
}
return false;
}
function onRemove(e, treeId, treeNode) {
showLog("[ onRemove ] " + treeNode.name);
}
function beforeRename(treeId, treeNode, newName) {
className = (className === "dark" ? "":"dark");
showLog("[ beforeRename ] " + treeNode.name);
if (newName.length == 0) {
alert("节点名称不能为空.");
var zTree = $.fn.zTree.getZTreeObj("leftTree");
setTimeout(function(){zTree.editName(treeNode)}, 10);
return false;
}
return true;
}
function onRename(e, treeId, treeNode) {
showLog("[onRename ] " + treeNode.name);
}
function showRemoveBtn(treeId, treeNode) {
//return !treeNode.isFirstNode;
return true;
}
function showRenameBtn(treeId, treeNode) {
//return !treeNode.isLastNode;
return true;
}
function beforeDrag(treeId, treeNodes) {
for (var i=0,l=treeNodes.length; i<l; i++) {
if (treeNodes[i].drag === false) {
return false;
}
}
return true;
}
function beforeDrop(treeId, treeNodes, targetNode, moveType) {
return targetNode ? targetNode.drop !== false : true;
}
$(document).ready(function(){
//默认隐藏右边一棵树相关
$("#rightDiv").hide();
$("#rightTreeOpt").hide();
$("#modTwoTree").click(function() {
if($(this).attr("checked")) {
$("#rightDiv").show();
$("#rightTreeOpt").show();
} else {
$("#rightDiv").hide();
$("#rightTreeOpt").hide();
}
});
//获取第一棵树的数据
var o = {code:code,method:'getModifyTreeData'};
ajaxcall(o, function(d) {
//查询成功处理
var zNodes = d[0].data.list;
for (var i=0, l=zNodes.length; i<l; i++) {
var node = zNodes[i];
if(node.hasOwnProperty("pid"))
node.pId = node.pid;
node.name = node.name.replace(/\.n/g, '.');
}
$.fn.zTree.init($("#leftTree"), setting, zNodes);
$.fn.zTree.init($("#rightTree"), setting);
});
});
function ajaxcall(data, callback, method, __listenerClass) {
var o = {___name:'execUnit',___service:'handlerService'};
//判断并设置method
if(method) o.method = method;
else if(!data.hasOwnProperty("method")) {
alert("请指定method");
return;
}
//判断并设置listenerClass
if(__listenerClass) o.listenerClass = __listenerClass;
else if(listenerClass) o.listenerClass = listenerClass;
else if(!data.hasOwnProperty("listenerClass")) {
alert("请指定listenerClass");
return;
}
$.ajax({
type: "post",
dataType: "json",//返回json格式的数据
url: url,//要访问的后台地址
data: $.extend(o, data),
success: successHandle,
error:errorHandle
});
function successHandle(d) {
var error = d[0]["error"];
var exception = d[0]["exception"];
if(exception && (error=="true" || error==true)) {
//后台出现异常，提示错误信息
alert(exception);
}
callback(d)
}
function errorHandle() {
}
}
</script>
</head>
<body>
<div class="content_wrap">
<div>
<ul class="info">
<li class="title">
<ul class="list">
<li>删除节点选项：
<input type=radio id="qrscOpt" name="scOpt" checked><label for="qrscOpt">已分配权限的节点，提醒确认是否删除</label>
<input type=radio id="scqxOpt" name="scOpt"><label for="scqxOpt">删除节点的同时，也删除权限</label>
<input type=radio id="bscOpt" name="scOpt"><label for="bscOpt">已分配权限的节点，不能删除</label>
</li>
<li>
<input type=checkbox id="dispBtnOpt"><label for="dispBtnOpt">显示菜单节点的按钮节点</label>
</li>
<!--
<li>
<input type=checkbox id="modTwoTree"><label for="modTwoTree">在不同菜单树间修改</label>
<span id="rightTreeOpt">
右边树类型：
<select id="rightTreeType">
<option value="001">----- 请选择 -----</option>
<option value="002">系统管理</option>
<option value="003">综合查询</option>
</select>
提示：你可以拖动一棵树节点到另一棵树上
</span>
</li>
-->
</ul>
</li>
</ul>
</div>
<div class="zleftTreeBackground left">
<ul id="leftTree" class="ztree"></ul>
</div>
<div class="right" id="rightDiv">
<ul id="rightTree" class="ztree"></ul>
</div>
</div>
</body>
</html>