zTree插件的基本功能全部实现：
前段时间工作需要对zThree进行了研究：对照zTree的API进行使用
动态链接数据库：实现增删改查，和单个多个节点拖拽功能，使用Ajax和数据库动态更新。
首次加载
$.fn.zTree.init($("#treeDemo2"), setting2, zNodes2);
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
如果是现实多颗树需要多个setting和zNodes使用
addDiyDom 用于在节点上固定显示用户自定义控件
addHoverDom用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
removeHoverDom用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page import="com.operate.common.exception.OMSException"%>
<%@ page import="com.operate.common.util.LogUtil"%>
<%@ page import="java.util.*"%>
<%@ include file="/common/taglibs.jsp"%>
<HTML>
<HEAD>
<link rel="stylesheet" href="${ctx}/js/ztree/css/demo.css" type="text/css"></link>
<link rel="stylesheet" href="${ctx}/js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"></link>
<script type="text/javascript" src="${ctx}/js/ztree/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${ctx}/js/ztree/jquery.ztree.core-3.3.js"></script>
<script type="text/javascript" src="${ctx}/js/ztree/jquery.ztree.excheck-3.3.js"></script>
<script type="text/javascript" src="${ctx}/js/ztree/jquery.ztree.exedit-3.3.min.js"></script>
<script type="text/javascript" src="${ctx}/js/ztree/jquery.ztree.exedit-3.3.js"></script>
<script type="text/javascript" src="${ctx}/js/ztree/jquery.ztree.exedit-3.3.min.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting =
{
view: {
dblClickExpand: false,//需要设置是否双击切换展开状态的节点 JSON 数据对象
},
edit: {
enable: true,
showRemoveBtn: false,//需要设置是否显示删除按钮的节点 JSON 数据对象
showRenameBtn:false //需要设置是否显示编辑名称按钮的节点 JSON 数据对象
},
check: {
enable: false,//设置 zTree 是否开启异步加载模式
nocheckInherit: false,//true 表示 新加入子节点时，自动继承父节点 nocheck = true 的属性。
chkboxType: { "Y": "s", "N": "s" }
},
callback: {
onClick: onclick,//用于捕获节点被点击的事件回调函数
onRightClick: OnRightClick,//鼠标右键点击时所在节点的 JSON 数据对象
onRename: zTreeOnRename,//用于捕获节点编辑名称结束之后的事件回调函数。
beforeRename:zTreeBeforeRename,//用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作
//拖拽
beforeDrag: beforeDrag,//用于捕获节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作
beforeDrop: beforeDrop,//用于捕获节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作
onDrag: zTreeOnDrag,//用于捕获节点被拖拽的事件回调函数
onDrop: zTreeOnDrop//用于捕获节点拖拽操作结束的事件回调函数
},
data: {
simpleData: {
enable: true,//设置 zTree 是否开启异步加载模式
idKey: "id",//节点数据中保存唯一标识的属性名称
pIdKey: "pId"//节点数据中保存其父节点唯一标识的属性名称。
}
},
key: {
url: "url"//特殊用途：当后台数据只能生成 url 属性，又不想实现点击节点跳转的功能时，可以直接修改此属性为其他不存在的属性名称
}
};
//右键是否显示删除，更改，添加按钮
//自定义栏目初始化是否可以拖拽，是否可以，编辑
var zNodes =eval_r(${json});
function OnRightClick(event, treeId, treeNode) {
var nodesss = zTree.getSelectedNodes();
//alert(treeNode.name);
//alert(nodesss.name);
//确定当前选中的节点
for(var i=0;i<nodesss.length;i++)
{
if(nodesss[i].id==treeNode.id)
{
$("#update_edit").show();
if(treeNode.name!="封面"&&treeNode.name!="媒体简介")
{
// alert(treeNode.name);
//alert(treeNode.pId);
if(treeNode.pId!="0"&&treeNode.name!="....")
{
$("#m_add").remove();
if($("#m_del").html()==null)
{
$("#m_del_span").append("<li id='m_del' onclick='removeTreeNode();'>删除</li>");
}
showRMenu("hideAll", event.clientX, event.clientY);
}
else
if(treeNode.pId=="0")
{
if($("#m_add").html()==null){
$("#m_add_span").append("<li id='m_add' onclick='addTreeNode();'>增加</li>");
}
if($("#m_del").html()==null)
{
$("#m_del_span").append("<li id='m_del' onclick='removeTreeNode();'>删除</li>");
}
showRMenu("updatejie", event.clientX, event.clientY);
}
else if(treeNode.name=="...."){
$("#update_edit").hide();
if($("#m_add").html()==null){
$("#m_add_span").append("<li id='m_add' onclick='addTreeNode();'>增加</li>");
}
if($("#m_del").html()==null){
$("#m_del_span").append("<li id='m_del' onclick='removeTreeNode();'>删除</li>");
}
showRMenu("hide", event.clientX, event.clientY);
}
}
}
}
}
//更具等到不同的参数显示不同
function showRMenu(type, x, y) {
var deletHide=0;
$("#rMenu ul").show();
$("#update_edit_span").show();
var nodesss = zTree.getSelectedNodes();
if(nodesss.length>1){
$("#m_add").remove();
$("#update_edit_span").hide();
}
for(var i=0;i<nodesss.length;i++) {
if(nodesss[i].name=="封面"||nodesss[i].name=="媒体简介"||nodesss[i].name=="...."){
$("#m_del").remove();
}
}
if(type=="hideAll"){
$("#m_del").show();
}else if(type=="updatejie"){
$("#m_del").show();
}else if(type=="hide"){
$("#m_del").hide();
}
rMenu = $("#rMenu");
rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});
$("body").bind("mousedown", onBodyMouseDown);
}
function hideRMenu() {
if (rMenu) rMenu.css({"visibility": "hidden"});
$("body").unbind("mousedown", onBodyMouseDown);
}
function onBodyMouseDown(event){
rMenu = $("#rMenu");
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
rMenu.css({"visibility" : "hidden"});
}
}
var addCount = 1;
function addTreeNode() {
hideRMenu();
var newNode = "";
if (zTree.getSelectedNodes()[0]) {
var nodes = zTree.getSelectedNodes()[0];//当前选中节点对象
var pid=nodes.id;
var dimensionid=nodes.dimensionID;
newNode.checked = zTree.getSelectedNodes()[0].checked;
$.ajax({
type: "POST",
url: "projectBriefAction!leftSavr",
data: {"name":newNode,"pId":nodes.id,"dimensionID":dimensionid},
success: function(str){
var strs= new Array(); //定义一数组
strs=str.split(","); //字符分割
var msg=strs[0];
var sequenceNumber=strs[1];
var url=strs[2];
// alert(msg);
//alert(sequenceNumber);
// alert(url);
if(pid==9999999){
zTree.addNodes(zTree.getSelectedNodes()[0], [{"id":msg,"pId":pid,"name":newNode,"open":true,"dimensionID":dimensionid,"sequenceNumber":sequenceNumber,"url":url}]);
}else
{
zTree.addNodes(zTree.getSelectedNodes()[0], [{"id":msg,"pId":pid,"name":newNode,"dimensionID":dimensionid,"sequenceNumber":sequenceNumber,"url":url}]);
}
//zTree.editName(zTree.getSelectedNodes()[0]);
var childNodes = zTree.transformToArray(nodes);
var nodes1 = new Array();
for(i = 0; i < childNodes.length; i++) {
nodes1[i] = childNodes[i].id;
if(nodes1[i]==msg)
{
zTree.editName(childNodes[i]);
}
}
}
});
} else {
zTree.addNodes(null, newNode);
}
}
//删除节点
function removeTreeNode() {
hideRMenu();
v = "";
var nodes = zTree.getSelectedNodes();//获取 多选ctrl +的集合
// nodesall = zTree.getCheckedNodes(true);
nodesall = zTree.getSelectedNodes();
var msg = "确定要删除选中的节点？，如果删除将连同子节点一起删掉。\n\n请确认！";
if(nodesall.length>1){
if (confirm(msg)==true){
for (var i=0, l=nodesall.length; i<l; i++) {
v += nodesall[i].name + ",";
//获取选中节点的id值
zTree.removeNode(nodesall[i]);
delectall(nodesall[i]);
}
}
}else if (nodes && nodes.length>0) {
if (nodes[0].children && nodes[0].children.length > 0) {
var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
if (confirm(msg)==true){
delectall(nodes[0]);
zTree.removeNode(nodes[0]);
}
} else {
$.ajax({
type: "POST",
url: "projectBriefAction!deletes",
data: {"Id":nodes[0].id},
success: function(msg){
}
});
zTree.removeNode(nodes[0]);
}
}
}
var zTree, rMenu;
//首次加载
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
zTree = $.fn.zTree.getZTreeObj("treeDemo");
$("#treeDemo_3_check").remove();
$("#treeDemo_2_check").remove();
$("#treeDemo_1_check").remove();
//rMenu = $("#rMenu");
});
//-->
//更改
function zTreeOnRename(event, treeId, treeNode) {
//alert(treeNode.id);
update(treeNode.id,treeNode.name,treeNode.pId,"")
}
//验证编辑是否可以为空
function zTreeBeforeRename(treeId, treeNode, newName,codes) {
if(newName.length>30)
{
alert("名称长度不可以大于30");
return false;
}else
if(newName.length > 0){
return true;
}else
{
alert("不可以为空！");
return false;
}
}
//ajax异步提交更新
function update(id,name,pid,sequenceNumber)
{
//alert("2");
$.ajax({
type: "POST",
url: "projectBriefAction!leftSaveUpdate",
data: {"Id":id,"name":name,"pId":pid,"sequenceNumber":sequenceNumber},
success: function(msg){
}
});
}
//给予节点集合，循环删除
function delectall(node)
{
var childNodes = zTree.transformToArray(node);
var nodes1 = new Array();
for(i = 0; i < childNodes.length; i++) {
nodes1[i] = childNodes[i].id;
// alert(nodes1[i]);
$.ajax({
type: "POST",
url: "projectBriefAction!deletes",
data: {"Id":nodes1[i]},
success: function(msg){
}
});
}
}
//右键编辑开启编辑功能
function updateNode()
{
hideRMenu();
var nodes = zTree.getSelectedNodes()[0];
zTree.editName(nodes);
}
//托拽
function beforeDrag(treeId, treeNodes) {
var childNodes = zTree.getSelectedNodes();
var boo=0;
for(var i=0; i<childNodes.length;++i){
for(var j=childNodes.length-1;j>i;--j){
if(childNodes[j].pId!=childNodes[j-1].pId)
{
boo=1;
}
}
}
if(boo==1)
{
return false;
}
else if(treeNodes[0].name=="封面"||treeNodes[0].name=="媒体简介"){
return false;
}
return true;
}
//拖拽验证
function beforeDrop(treeId, treeNodes, targetNode, moveType) {
var nodes = zTree.getSelectedNodes();
var childNodes = zTree.transformToArray(treeNodes);
//目标是否是父节点
zTree = $.fn.zTree.getZTreeObj("treeDemo");
var node=zTree.getNodeByParam("id",targetNode.id,null);
var childNode = zTree.transformToArray(node);
if(targetNode.pId!="0"&&moveType=="inner")
{
return false;
}
var boo=0;
for(var i=0; i<childNodes.length;++i){
for(var j=childNodes.length-1;j>i;--j){
if(childNodes[j].pId!=childNodes[j-1].pId)
{
boo=1;
}
}
}
if(moveType=="inner"){
if(boo==1)
{
return false;
}
}
if(targetNode.id=="0")
{
return false;
}
if(targetNode.pId=="0")
{
if(targetNode.name=="封面")
return false;
}
if(targetNode.name=="媒体简介"&&moveType=="inner"||targetNode.name=="媒体简介"&&moveType=="prev")
{
return false
}
return true;
}
//更新 拖拽目标节点的父节点排序
function updatebeforeDrop(joon,moveType,pId)
{
$.ajax({
type: "POST",
url: "projectBriefAction!updatebeforeDrop",
data: {"name":joon,"moveType":moveType,"pId":pId},
success: function(msg){
}
});
}
//得到拖拽后的json发送给后台解析，进行存储操作
function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
if(moveType=="prev"||moveType=="next"){
zTree = $.fn.zTree.getZTreeObj("treeDemo");
var node=zTree.getNodeByParam("id",targetNode.pId,null);
var childNodes = zTree.transformToArray(node);
// console.log(JSON.stringify(childNodes[0].children));
updatebeforeDrop(JSON.stringify(childNodes[0].children),moveType);
}else{
//console.log(JSON.stringify(treeNodes));
//update(treeNodes[0].id,"",targetNode.id,"");
updatebeforeDrop(JSON.stringify(treeNodes),moveType,targetNode.id);
}
return true;
};
function zTreeOnDrag(event, treeId, treeNodes) {
return true;
};
//开编辑状态不可以使用url onclick实现
function onclick(event, treeId, treeNode) {
//alert(treeNode.url);
//alert(treeNode.sequenceNumber);
var f=document_createElement_x_x_x("form");
f.action=treeNode.url;
f.target="outline_right";
f.method="post";
document.body.a(f);
f.submit();
};
</SCRIPT>
<style type="text/css">
div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
div#rMenu ul li{
margin: 1px 0;
padding: 0 5px;
cursor: pointer;
list-style: none outside none;
background-color: #DFDFDF;
}
</style>
</HEAD>
<BODY>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div id="rMenu">
<ul id="ull">
<span id="m_add_span"> <li id="m_add" onclick="addTreeNode();">增加</li></span>
<span id="update_edit_span"><li id="update_edit" onclick="updateNode();">更改名称</li></span>
<span id="m_del_span"><li id="m_del" onclick="removeTreeNode();">删除</li></span>
</ul>
</div>
</div>
</BODY>
</HTML>
<!--
var setting = {
view: {
dblClickExpand: false,//需要设置是否双击切换展开状态的节点 JSON 数据对象
},
edit: {
enable: true,
showRemoveBtn: false,//需要设置是否显示删除按钮的节点 JSON 数据对象
showRenameBtn:false //需要设置是否显示编辑名称按钮的节点 JSON 数据对象
},
check: {
enable: false,//设置 zTree 是否开启异步加载模式
nocheckInherit: false,//true 表示 新加入子节点时，自动继承父节点 nocheck = true 的属性。
chkboxType: { "Y": "s", "N": "s" }
},
callback: {
onClick: onclick,//用于捕获节点被点击的事件回调函数
onRightClick: OnRightClick,//鼠标右键点击时所在节点的 JSON 数据对象
onRename: zTreeOnRename,//用于捕获节点编辑名称结束之后的事件回调函数。
beforeRename:zTreeBeforeRename,//用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作
//拖拽
beforeDrag: beforeDrag,//用于捕获节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作
beforeDrop: beforeDrop,//用于捕获节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作
onDrag: zTreeOnDrag,//用于捕获节点被拖拽的事件回调函数
onDrop: zTreeOnDrop//用于捕获节点拖拽操作结束的事件回调函数
},
data: {
simpleData: {
enable: true,//设置 zTree 是否开启异步加载模式
idKey: "id",//节点数据中保存唯一标识的属性名称
pIdKey: "pId"//节点数据中保存其父节点唯一标识的属性名称。
}
},
key: {
url: "url"//特殊用途：当后台数据只能生成 url 属性，又不想实现点击节点跳转的功能时，可以直接修改此属性为其他不存在的属性名称
}
};
//右键是否显示删除，更改，添加按钮
var zNodes =eval_r(${json});
function OnRightClick(event, treeId, treeNode) {
var nodesss = zTree.getSelectedNodes();
//alert(treeNode.name);
//alert(nodesss.name);
//确定当前选中的节点
for(var i=0;i<nodesss.length;i++)
{
if(nodesss[i].id==treeNode.id){
$("#update_edit").show();
if(treeNode.name!="封面"&&treeNode.name!="媒体简介")
{
// alert(treeNode.name);
//alert(treeNode.pId);
if(treeNode.pId!="0"&&treeNode.name!="....")
{
$("#m_add").remove();
showRMenu("hideAll", event.clientX, event.clientY);
}
else
if(treeNode.pId=="0")
{
if($("#m_add").html()==null){
$("#m_add_span").append("<li id='m_add' onclick='addTreeNode();'>增加</li>");
}
showRMenu("updatejie", event.clientX, event.clientY);
}
else
if(treeNode.name=="....")
{
$("#update_edit").hide();
if($("#m_add").html()==null){
$("#m_add_span").append("<li id='m_add' onclick='addTreeNode();'>增加</li>");
}
showRMenu("hide", event.clientX, event.clientY);
}
}
}
}
}
//更具等到不同的参数显示不同
function showRMenu(type, x, y) {
$("#rMenu ul").show();
$("#update_edit_span").show();
var nodesss = zTree.getSelectedNodes();
if(nodesss.length>1)
{
$("#m_add").remove();
$("#update_edit_span").hide();
update_edit_span
}
if(type=="hideAll")
{
$("#m_del").show();
}
if(type=="updatejie")
{
$("#m_del").show();
}
if(type=="hide")
{
$("#m_del").hide();
}
rMenu = $("#rMenu");
rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});
$("body").bind("mousedown", onBodyMouseDown);
}
function hideRMenu() {
if (rMenu) rMenu.css({"visibility": "hidden"});
$("body").unbind("mousedown", onBodyMouseDown);
}
function onBodyMouseDown(event){
rMenu = $("#rMenu");
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
rMenu.css({"visibility" : "hidden"});
}
}
var addCount = 1;
function addTreeNode() {
hideRMenu();
var newNode = "";
if (zTree.getSelectedNodes()[0]) {
var nodes = zTree.getSelectedNodes()[0];//当前选中节点对象
var pid=nodes.id;
var dimensionid=nodes.dimensionID;
newNode.checked = zTree.getSelectedNodes()[0].checked;
$.ajax({
type: "POST",
url: "projectBriefAction!leftSavr",
data: {"name":newNode,"pId":nodes.id,"dimensionID":dimensionid},
success: function(str){
var strs= new Array(); //定义一数组
strs=str.split(","); //字符分割
var msg=strs[0];
var sequenceNumber=strs[1];
var url=strs[2];
// alert(msg);
//alert(sequenceNumber);
// alert(url);
if(pid==9999999){
zTree.addNodes(zTree.getSelectedNodes()[0], [{"id":msg,"pId":pid,"name":newNode,"open":true,"dimensionID":dimensionid,"sequenceNumber":sequenceNumber,"url":url}]);
}else
{
zTree.addNodes(zTree.getSelectedNodes()[0], [{"id":msg,"pId":pid,"name":newNode,"dimensionID":dimensionid,"sequenceNumber":sequenceNumber,"url":url}]);
}
//zTree.editName(zTree.getSelectedNodes()[0]);
var childNodes = zTree.transformToArray(nodes);
var nodes1 = new Array();
for(i = 0; i < childNodes.length; i++) {
nodes1[i] = childNodes[i].id;
if(nodes1[i]==msg)
{
zTree.editName(childNodes[i]);
}
}
}
});
} else {
zTree.addNodes(null, newNode);
}
}
//删除节点
function removeTreeNode() {
hideRMenu();
v = "";
var nodes = zTree.getSelectedNodes();//获取 多选ctrl +的集合
// nodesall = zTree.getCheckedNodes(true);
nodesall = zTree.getSelectedNodes();
var msg = "确定要删除选中的节点？，如果删除将连同子节点一起删掉。\n\n请确认！";
if(nodesall.length>1){
if (confirm(msg)==true){
for (var i=0, l=nodesall.length; i<l; i++) {
v += nodesall[i].name + ",";
//获取选中节点的id值
zTree.removeNode(nodesall[i]);
delectall(nodesall[i]);
}
}
}else
if (nodes && nodes.length>0) {
if (nodes[0].children && nodes[0].children.length > 0) {
var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
if (confirm(msg)==true){
delectall(nodes[0]);
zTree.removeNode(nodes[0]);
}
} else {
$.ajax({
type: "POST",
url: "projectBriefAction!deletes",
data: {"Id":nodes[0].id},
success: function(msg){
}
});
zTree.removeNode(nodes[0]);
}
}
}
var zTree, rMenu;
//首次加载
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
zTree = $.fn.zTree.getZTreeObj("treeDemo");
$("#treeDemo_3_check").remove();
$("#treeDemo_2_check").remove();
$("#treeDemo_1_check").remove();
//rMenu = $("#rMenu");
});
//-->
//更改
function zTreeOnRename(event, treeId, treeNode) {
//alert(treeNode.id);
update(treeNode.id,treeNode.name,treeNode.pId,"")
}
//验证编辑是否可以为空
function zTreeBeforeRename(treeId, treeNode, newName,codes) {
if(newName.length > 0){
return true;
}else
{
alert("不可以为空！");
return false;
}
}
//ajax异步提交更新
function update(id,name,pid,sequenceNumber)
{
//alert("2");
$.ajax({
type: "POST",
url: "projectBriefAction!leftSaveUpdate",
data: {"Id":id,"name":name,"pId":pid,"sequenceNumber":sequenceNumber},
success: function(msg){
}
});
}
//给予节点集合，循环删除
function delectall(node)
{
var childNodes = zTree.transformToArray(node);
var nodes1 = new Array();
for(i = 0; i < childNodes.length; i++) {
nodes1[i] = childNodes[i].id;
// alert(nodes1[i]);
$.ajax({
type: "POST",
url: "projectBriefAction!deletes",
data: {"Id":nodes1[i]},
success: function(msg){
}
});
}
}
//右键编辑开启编辑功能
function updateNode()
{
hideRMenu();
var nodes = zTree.getSelectedNodes()[0];
zTree.editName(nodes);
}
//托拽
function beforeDrag(treeId, treeNodes) {
var childNodes = zTree.getSelectedNodes();
var boo=0;
for(var i=0; i<childNodes.length;++i){
for(var j=childNodes.length-1;j>i;--j){
if(childNodes[j].pId!=childNodes[j-1].pId)
{
boo=1;
}
}
}
if(boo==1)
{
return false;
}
else if(treeNodes[0].name=="封面"||treeNodes[0].name=="媒体简介"){
return false;
}
return true;
}
//拖拽验证
function beforeDrop(treeId, treeNodes, targetNode, moveType) {
var nodes = zTree.getSelectedNodes();
var childNodes = zTree.transformToArray(treeNodes);
//目标是否是父节点
zTree = $.fn.zTree.getZTreeObj("treeDemo");
var node=zTree.getNodeByParam("id",targetNode.id,null);
var childNode = zTree.transformToArray(node);
if(targetNode.pId!="0"&&moveType=="inner")
{
return false;
}
var boo=0;
for(var i=0; i<childNodes.length;++i){
for(var j=childNodes.length-1;j>i;--j){
if(childNodes[j].pId!=childNodes[j-1].pId)
{
boo=1;
}
}
}
if(moveType=="inner"){
if(boo==1)
{
return false;
}
}
if(targetNode.id=="0")
{
return false;
}
if(targetNode.pId=="0")
{
if(targetNode.name=="封面")
return false;
}
if(targetNode.name=="媒体简介"&&moveType=="inner"||targetNode.name=="媒体简介"&&moveType=="prev")
{
return false
}
return true;
}
//更新 拖拽目标节点的父节点排序
function updatebeforeDrop(joon,moveType,pId)
{
$.ajax({
type: "POST",
url: "projectBriefAction!updatebeforeDrop",
data: {"name":joon,"moveType":moveType,"pId":pId},
success: function(msg){
}
});
}
function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
if(moveType=="prev"||moveType=="next"){
zTree = $.fn.zTree.getZTreeObj("treeDemo");
var node=zTree.getNodeByParam("id",targetNode.pId,null);
var childNodes = zTree.transformToArray(node);
// console.log(JSON.stringify(childNodes[0].children));
updatebeforeDrop(JSON.stringify(childNodes[0].children),moveType);
}else
{
//console.log(JSON.stringify(treeNodes));
//update(treeNodes[0].id,"",targetNode.id,"");
updatebeforeDrop(JSON.stringify(treeNodes),moveType,targetNode.id);
}
return true;
};
function zTreeOnDrag(event, treeId, treeNodes) {
return true;
};
//开编辑状态不可以使用url onclick实现
function onclick(event, treeId, treeNode) {
//alert(treeNode.url);
//alert(treeNode.sequenceNumber);
var f=document_createElement_x_x_x_x_x("form");
f.action=treeNode.url;
f.target="outline_right";
f.method="post";
document.body.a(f);
f.submit();
};
</SCRIPT>
<style type="text/css">
div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
div#rMenu ul li{
margin: 1px 0;
padding: 0 5px;
cursor: pointer;
list-style: none outside none;
background-color: #DFDFDF;
}
</style>
</HEAD>
<BODY>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
<div id="rMenu">
<ul id="ull">
<span id="m_add_span"> <li id="m_add" onclick="addTreeNode();">增加</li></span>
<span id="update_edit_span"><li id="update_edit" onclick="updateNode();">更改名称</li></span>
<span id="m_del_span"><li id="m_del" onclick="removeTreeNode();">删除</li></span>
</ul>
</div>
</BODY>
</HTML>
相关推荐
本文实例为大家分享了jQuery zTree插件使用简单教程，供大家参考，具体内容如下 首先说一下，在web开发过程中会有很多的地方需要到树形的插件，JQuery 就有树的插件，本次简单教程讲的是zTree的使用教程。 官方下载...
JQuery zTree是一款基于JavaScript的开源树形插件，它主要应用于网页开发，提供丰富的树状数据展示功能。zTree v3.3是该插件的一个版本，它在前一版本的基础上进行了优化和增强，旨在提供更高效、更稳定的服务。 在...
在Web开发中，jQuery ZTree是一款广泛应用于树形结构展示的插件，尤其适用于构建文件目录、组织结构等场景。本文将详细解析jQuery ZTree 3.5版本开发所必需的CSS和JS文件，以及如何有效地利用这些资源。 首先，...
在IT领域，jQuery ZTree是一款广泛使用的JavaScript组件，它能够帮助开发者轻松地创建交互式的树状结构。在处理大量数据并需要提供用户友好的搜索功能时，ZTree的模糊查询功能就显得尤为重要。本篇文章将深入探讨...
**jQuery zTree** 是一个基于jQuery的开源树形插件，它被广泛应用于网页中构建交互式的树形结构。这个插件提供了丰富的功能，如节点的增删改查、节点的展开与折叠、多选模式、异步加载数据等。在本资料中，我们包含...
jQuery zTree是一款基于JavaScript的开源树形插件，专为jQuery库设计。它以其强大的功能、丰富的API和灵活的配置选项，广泛应用于网页中的数据展示、操作与交互。zTree V3.1作为其最新版本，不仅继承了前代的优点，...
**JQuery zTree** 是一个基于JavaScript的开源项目，它为网页开发者提供了一种高效、易用的树状菜单插件。zTree充分利用了jQuery库的强大功能，使得在网页上构建交互式的树形结构变得简单快捷。这个插件广泛应用于...
在ASP.NET Web开发中，jQuery zTree是一款非常流行的树形插件，用于构建交互式的、可异步加载数据的树结构。zTree以其强大的功能、灵活的配置和友好的API，深受开发者喜爱。本篇文章将深入探讨如何在项目中集成和...
《jQuery ZTree自定义编辑的树形菜单插件详解》 在Web开发中，树形菜单是一种常见的数据展示形式，它能清晰地呈现层级关系，方便用户浏览和操作。jQuery ZTree是一款强大的JavaScript树形菜单插件，尤其适用于构建...
**JQuery zTree 插件详解** JQuery zTree 是一款基于 jQuery 的开源树状插件，它在 Web 应用程序中广泛用于构建交互式的树形数据结构。该插件设计灵活，功能强大，支持多种操作，如节点的增删改查、异步加载、多选...
jQuery zTree 是一款基于 jQuery 的树形插件，广泛应用于网站导航、组织结构展示、文件目录管理等多种场景。v3.5 版本是其一个重要的里程碑，它提供了丰富的功能和优化的性能，使得开发者能够更加灵活地构建树形结构...
jQuery zTree是一款基于jQuery的树形插件，它在Web开发中广泛应用于构建动态、交互式的树状结构。zTree的核心特性在于其轻量级、高度可定制和良好的性能表现，为开发者提供了丰富的API和事件处理机制，使得在网页上...
jQuery zTree是一款基于jQuery的树形插件，广泛应用于网站的导航、组织结构展示、数据管理等场景。本示例旨在详细介绍如何使用zTree，包括其基本配置、功能实现和常见操作。 ### 一、zTree API v2.4.chm `zTreeAPI...
jQuery zTree是一款基于jQuery的树形插件，它在Web开发中广泛应用于构建动态、交互式的树状结构，如网站导航、数据分类、权限管理等场景。该资源包"jquery ztree.rar"包含了Ztree的使用文档和最新版本的库文件，为...
jQuery zTree是一款基于jQuery库的树状插件，广泛应用于网页中的目录展示、数据管理、权限控制等场景。它以其丰富的功能、灵活的配置和良好的用户体验受到开发者的青睐。在v3.5.15版本中，zTree提供了一套完善的API...
1.前端使用jquery-ztree插件，后端读取数据库，封装成json格式，在前端展示。数据库字段和Tree这个实体类的字段是一致的。struts2+spring架构。 2.另外里面还含有定时启动的例子。Spring-Quartz的配置和使用。
同时，`jquery-ztree-2.0.js`和`jquery-ztree-2.0.min.js`分别是完整版和压缩版的zTree插件文件。 **五、更新日志** `更新日志2.x.txt`文件记录了zTree 2.0版本的更新内容和修复的问题，是了解新特性、改进和已知...