java+ztree编辑保存

最新推荐文章于 2024-07-16 10:23:26 发布

原创最新推荐文章于 2024-07-16 10:23:26 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

javaEE 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个基于jQuery的树形插件zTree的使用方法。详细展示了如何通过Ajax加载树节点数据，并实现节点的增删改查等功能。文章还提供了丰富的事件处理函数说明，帮助开发者更好地理解和应用zTree。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

代码如下：

<title>Insert title here</title>
<link rel="stylesheet" href="<%=basePath%>util/zTree/css/demo.css" type="text/css">
<link rel="stylesheet" type="text/css"
href="<%=basePath%>util/zTree/css/zTreeStyle/zTreeStyle.css">

<script type="text/javascript" src="<%=basePath%>util/jqEasyUI/myAdd/jquery-1.8.3.js"></script>
<script src="<%=basePath%>util/zTree/js/jquery.ztree.all-3.5.js"
type="text/javascript"></script>
<script src="<%=basePath%>util/zTree/js/jquery.ztree.core-3.5.js"
type="text/javascript"></script>
<script src="<%=basePath%>util/zTree/js/jquery.ztree.excheck-3.5.js"
type="text/javascript"></script>
<script src="<%=basePath%>util/zTree/js/jquery.ztree.exedit-3.5.js"
type="text/javascript"></script>
<script src="<%=basePath%>util/zTree/js/jquery.ztree.exhide-3.5.js"
type="text/javascript"></script>
<SCRIPT type="text/javascript" src="<%=basePath%>util/js/companylist.js"></script>
<script type="text/javascript">

$(document).ready(function(){
//$.fn.zTree.init($("#treeDemo"), sett, zNo);

$.ajax({
type : "post",
async : false,
url : '<%=basePath%>companyAction02.do',
dataType : "json",
beforeSend : function(jqXHR, settings) {
},
success : function(data, textStatus, jqXHR) {//AJAX发送后成功执行。
zNodes = data;
$.fn.zTree.init($("#zTree"), setting, zNodes);
var zTree = $.fn.zTree.getZTreeObj("zTree");
zTree.expandAll(true);
$.fn.zTree.init($("#treeDemo"), sett, zNo);
return;
},
error : function(jqXHR, textStatus, errorThrown) {//AJAX发送出错执行。

alert("发生错误，请重试。");
return;
},
complete : function() {

}
});

});
</script>
<style type="text/css">
.ztree li span.button.add {margin-left:2px; margin-right: 5px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
</style>
</head>
<body>

<div class="content_wrap" style="width: 900px;height: 465px;float: left;">
<div class="zTreeDemoBackground left" style="width: 400px;height: 465px">
<ul id="zTree" class="ztree" style="width: 400px;height: 465px"></ul>
</div>

Companylist.js文件

var zTree;
var setting = {
view : {
addHoverDom : addHoverDom,
removeHoverDom : removeHoverDom,
dblClickExpand : true,
showLine : true,
showIcon : true,
selectedMulti : false,
expandSpeed : ($.browser.msie && parseInt($.browser.version) <= 6) ? ""
: "fast"
},
check : {
enable : false,
autoCheckTrigger : false
},
edit : {
enable : true,
editNameSelectAll : true,
// SHOWREMOVEBTN: SHOWREMOVEBTN,
// showRenameBtn: showRenameBtn
},
data : {
simpleData : {
enable : true,
idKey : "id",
pIdKey : "pId",
rootPId : ""
}
},
callback : {
beforeClick : function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("zTree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
}
},
// 新增单击回调函数
onClick : myOnClickCallback,
beforeDrag : beforeDrag,// 被拖拽之前
beforeEditName : beforeEditName,// 编辑按钮的 click 事件之前
beforeRemove : beforeRemove,// 被删除之前
beforeRename : beforeRename,// 编辑名称结束之前
onRemove : onRemove,// 删除节点之后
onRename : onRename
// 编辑名称结束之后
}
};
/**
* 菜单节点单击回调函数
*/
function myOnClickCallback(event, treeId, treeNode)// 菜单节点单击回调函数
{
event.preventDefault();// 阻止默认点击事件
// window.parent.frames['dmMain'].addTab("tab"+treeNode.id, treeNode.name,
// treeNode.url);
}

var log, className = "dark";
var url = "";
var newCount = 1;
/**
* 被拖拽之前
*
* @param treeId
* @param treeNodes
* @returns {Boolean}
*/
function beforeDrag(treeId, treeNodes) {// 被拖拽之前
return false;
}

/**
* 编辑按钮的 click 事件之前
*
* @param treeId
* @param treeNode
* @returns
*/
function beforeEditName(treeId, treeNode) {// 编辑按钮的 click 事件之前
className = (className === "dark" ? "" : "dark");
var zTree = $.fn.zTree.getZTreeObj("zTree");
zTree.selectNode(treeNode);
return confirm("进入节点 :" + treeNode.name + " 的编辑状态吗？");
}

/**
* 被删除之前
*
* @param treeId
* @param treeNode
* @returns
*/
function beforeRemove(treeId, treeNode) {// 被删除之前
className = (className === "dark" ? "" : "dark");
var zTree = $.fn.zTree.getZTreeObj("zTree");
zTree.selectNode(treeNode);
if (treeNode.isParent) {
alert("该节点不允许删除！");
return false;
} else {
return confirm("确认删除节点 :" + treeNode.name + " 吗？");
}
}

/**
* 删除节点之后
*
* @param treeNode
*/
function onRemove(e, treeId,treeNode) {// 删除节点之后
if (confirm("您确定要保存操作的内容吗？")) {
$.ajax({
async : false,
type : 'POST',
dataType : "json",
data : {
id : treeNode.id,
pId : treeNode.pId,
name : treeNode.name
},
url : 'companyAction05.do', // 
error : function() {
alert("出错了！请重试！");
},
success : function(data) {

}
});
} else {
return false;
}
}

/**
* 编辑名称结束之前
*
* @param treeId
* @param treeNode
* @param newName
* @param isCancel
* @returns {Boolean}
*/
function beforeRename(treeId, treeNode, newName, isCancel) {// 编辑名称结束之前
className = (className === "dark" ? "" : "dark");
var zTree = $.fn.zTree.getZTreeObj("zTree");
if (newName.length == 0) {
alert("节点名称不能为空！");

setTimeout(function() {
zTree.editName(treeNode);
}, 10);

return false;
} else {
// console.info(treeNode.name);
if (newName!= "newNode"&&newName.length>0) {
if (treeNode.name == "newNode") {
url = "companyAction03.do";
} else {
url = "companyAction04.do";
}
}else{
setTimeout(function() {
zTree.editName(treeNode);
}, 10);
return false;
}

}
return true;
}

/**
* 编辑名称结束之后
*
* @param e
* @param treeId
* @param treeNode
* @param isCancel
*/
function onRename(e, treeId, treeNode, isCancel) {// 编辑名称结束之后
//console.info(treeNode.id);
var treeObj = $.fn.zTree.getZTreeObj("zTree");
var index = treeObj.getNodeIndex(treeNode);
// console.info(index);alert(index);
if (confirm("您确定要保存修改的内容吗？")) {
$.ajax({
async : false,
type : 'POST',
dataType : "json",
data : {
id : treeNode.id,
pId : treeNode.pId,
name : treeNode.name,
index : index
},
url : url, // 
error : function() {
alert("出错了！请重试！");
},
success : function(data) {
// window.parent.frames['iframe_tab104'].location.reload();
}
});
} else {
return false;
}
}

/**
* 添加鼠标事件
*
* @param treeId
* @param treeNode
*/
function addHoverDom(treeId, treeNode) {

var sObj = $("#" + treeNode.tId + "_span");// 获取节点对象
// console.info(treeNode.editNameFlag);
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0)
return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' onfocus='this.blur();'></span>";
//console.info(treeNode);
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.tId);// 获取添加按钮对象
if (btn)
btn.bind("click", function() {
var zTree = $.fn.zTree.getZTreeObj("zTree");
zTree.addNodes(treeNode, {
id : (1000 + newCount),
pId : treeNode.id,
name : "newNode"
});
return false;
});
};

/**
* 移除鼠标事件
*
* @param treeId
* @param treeNode
*/
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
};

/**
* 如果是第一个节点，不显示删除按钮
*
* @param treeId
* @param treeNode
* @returns
*/
// function showRemoveBtn(treeId, treeNode) {
// return !treeNode.isFirstNode;
// }
/**
* 显示重命名按钮
*
* @param treeId
* @param treeNode
* @returns
*/
// function showRenameBtn(treeId, treeNode) {
// return !treeNode.isLastNode;
// }
/**
* 显示操作信息
*
* @param str
*/
// 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]);
// }
// }
/**
* 获取时间
*
* @returns {String}
*/
// function getTime() {
// var now= new Date(),
// h=now.getHours(),
// m=now.getMinutes(),
// s=now.getSeconds(),
// ms=now.getMilliseconds();
// return (h+":"+m+":"+s+ " " +ms);
// }
function btnAdd(){
var treeObj = $.fn.zTree.getZTreeObj("zTree");
var nodes = treeObj.getSelectedNodes();
// console.info(nodes);
treeObj.addNodes(nodes, {
id : 1000,
pId : nodes.id,
name : "newNode"
});
}