zTree插件的基本功能全部實(shí)現(xiàn):
前段時(shí)間工作需要對(duì)zThree進(jìn)行了研究:對(duì)照zTree的API進(jìn)行使用
動(dòng)態(tài)鏈接數(shù)據(jù)庫(kù):實(shí)現(xiàn)增刪改查,和單個(gè)多個(gè)節(jié)點(diǎn)拖拽功能,使用Ajax和數(shù)據(jù)庫(kù)動(dòng)態(tài)更新。
首次加載
$.fn.zTree.init($("#treeDemo2"),setting2, zNodes2);
$.fn.zTree.init($("#treeDemo"),setting, zNodes);
如果是現(xiàn)實(shí)多顆樹(shù)需要多個(gè)setting和zNodes使用
addDiyDom 用于在節(jié)點(diǎn)上固定顯示用戶自定義控件
addHoverDom用于當(dāng)鼠標(biāo)移動(dòng)到節(jié)點(diǎn)上時(shí),顯示用戶自定義控件,顯示隱藏狀態(tài)同 zTree 內(nèi)部的編輯、刪除按鈕
removeHoverDom用于當(dāng)鼠標(biāo)移出節(jié)點(diǎn)時(shí),隱藏用戶自定義控件,顯示隱藏狀態(tài)同 zTree內(nèi)部的編輯、刪除按鈕
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ pageimport="com.operate.common.exception.OMSException"%>
<%@ pageimport="com.operate.common.util.LogUtil"%>
<%@ pageimport="java.util.*"%>
<%@ includefile="/common/taglibs.jsp"%>
<HTML>
<HEAD>
<link rel="stylesheet"href="${ctx}/js/ztree/css/demo.css"type="text/css"></link>
<linkrel="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>
<SCRIPTtype="text/javascript">
<!--
var setting =
{
view: {
dblClickExpand: false,//需要設(shè)置是否雙擊切換展開(kāi)狀態(tài)的節(jié)點(diǎn) JSON 數(shù)據(jù)對(duì)象
},
edit: {
enable: true,
showRemoveBtn: false,//需要設(shè)置是否顯示刪除按鈕的節(jié)點(diǎn) JSON 數(shù)據(jù)對(duì)象
showRenameBtn:false //需要設(shè)置是否顯示編輯名稱(chēng)按鈕的節(jié)點(diǎn) JSON 數(shù)據(jù)對(duì)象
},
check: {
enable: false,//設(shè)置 zTree 是否開(kāi)啟異步加載模式
nocheckInherit: false,//true 表示 新加入子節(jié)點(diǎn)時(shí),自動(dòng)繼承父節(jié)點(diǎn) nocheck = true的屬性。
chkboxType: { "Y": "s", "N": "s" }
},
callback: {
onClick:onclick,//用于捕獲節(jié)點(diǎn)被點(diǎn)擊的事件回調(diào)函數(shù)
onRightClick: OnRightClick,//鼠標(biāo)右鍵點(diǎn)擊時(shí)所在節(jié)點(diǎn)的 JSON 數(shù)據(jù)對(duì)象
onRename: zTreeOnRename,//用于捕獲節(jié)點(diǎn)編輯名稱(chēng)結(jié)束之后的事件回調(diào)函數(shù)。
beforeRename:zTreeBeforeRename,//用于捕獲節(jié)點(diǎn)編輯名稱(chēng)結(jié)束(Input 失去焦點(diǎn) 或 按下Enter 鍵)之后,更新節(jié)點(diǎn)名稱(chēng)數(shù)據(jù)之前的事件回調(diào)函數(shù),并且根據(jù)返回值確定是否允許更改名稱(chēng)的操作
//拖拽
beforeDrag:beforeDrag,//用于捕獲節(jié)點(diǎn)被拖拽之前的事件回調(diào)函數(shù),并且根據(jù)返回值確定是否允許開(kāi)啟拖拽操作
beforeDrop:beforeDrop,//用于捕獲節(jié)點(diǎn)拖拽操作結(jié)束之前的事件回調(diào)函數(shù),并且根據(jù)返回值確定是否允許此拖拽操作
onDrag: zTreeOnDrag,//用于捕獲節(jié)點(diǎn)被拖拽的事件回調(diào)函數(shù)
onDrop: zTreeOnDrop//用于捕獲節(jié)點(diǎn)拖拽操作結(jié)束的事件回調(diào)函數(shù)
},
data: {
simpleData: {
enable: true,//設(shè)置 zTree 是否開(kāi)啟異步加載模式
idKey: "id",//節(jié)點(diǎn)數(shù)據(jù)中保存唯一標(biāo)識(shí)的屬性名稱(chēng)
pIdKey: "pId"http://節(jié)點(diǎn)數(shù)據(jù)中保存其父節(jié)點(diǎn)唯一標(biāo)識(shí)的屬性名稱(chēng)。
}
},
key: {
url: "url"http://特殊用途:當(dāng)后臺(tái)數(shù)據(jù)只能生成 url屬性,又不想實(shí)現(xiàn)點(diǎn)擊節(jié)點(diǎn)跳轉(zhuǎn)的功能時(shí),可以直接修改此屬性為其他不存在的屬性名稱(chēng)
}
};
//右鍵是否顯示刪除,更改,添加按鈕
//自定義欄目初始化是否可以拖拽,是否可以,編輯
var zNodes =eval_r(${json});
function OnRightClick(event, treeId, treeNode) {
var nodesss = zTree.getSelectedNodes();
//alert(treeNode.name);
//alert(nodesss.name);
//確定當(dāng)前選中的節(jié)點(diǎn)
for(vari=0;i<nodesss.length;i++)
{
if(nodesss[i].id==treeNode.id)
{
$("#update_edit").show();
if(treeNode.name!="封面"&&treeNode.name!="媒體簡(jiǎn)介")
{
// 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);
}
elseif(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);
}
}
}
}
}
//更具等到不同的參數(shù)顯示不同
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=="媒體簡(jiǎn)介"||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];//當(dāng)前選中節(jié)點(diǎn)對(duì)象
varpid=nodes.id;
vardimensionid=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(); //定義一數(shù)組
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);
}
}
//刪除節(jié)點(diǎn)
function removeTreeNode() {
hideRMenu();
v = "";
var nodes = zTree.getSelectedNodes();//獲取 多選ctrl +的集合
// nodesall = zTree.getCheckedNodes(true);
nodesall = zTree.getSelectedNodes();
var msg ="確定要?jiǎng)h除選中的節(jié)點(diǎn)?,如果刪除將連同子節(jié)點(diǎn)一起刪掉。nn請(qǐng)確認(rèn)!";
if(nodesall.length>1){
if (confirm(msg)==true){
for (var i=0, l=nodesall.length;i<l; i++) {
v += nodesall[i].name +",";
//獲取選中節(jié)點(diǎn)的id值
zTree.removeNode(nodesall[i]);
delectall(nodesall[i]);
}
}
}elseif (nodes &&nodes.length>0) {
if (nodes[0].children &&nodes[0].children.length > 0) {
var msg = "要?jiǎng)h除的節(jié)點(diǎn)是父節(jié)點(diǎn),如果刪除將連同子節(jié)點(diǎn)一起刪掉。nn請(qǐng)確認(rè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,"")
}
//驗(yàn)證編輯是否可以為空
function zTreeBeforeRename(treeId, treeNode,newName,codes) {
if(newName.length>30)
{
alert("名稱(chēng)長(zhǎng)度不可以大于30");
return false;
}else
if(newName.length > 0){
return true;
}else
{
alert("不可以為空!");
return false;
}
}
//ajax異步提交更新
functionupdate(id,name,pid,sequenceNumber)
{
//alert("2");
$.ajax({
type: "POST",
url: "projectBriefAction!leftSaveUpdate",
data:{"Id":id,"name":name,"pId":pid,"sequenceNumber":sequenceNumber},
success: function(msg){
}
});
}
//給予節(jié)點(diǎn)集合,循環(huán)刪除
functiondelectall(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){
}
});
}
}
//右鍵編輯開(kāi)啟編輯功能
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(varj=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=="媒體簡(jiǎn)介"){
return false;
}
return true;
}
//拖拽驗(yàn)證
function beforeDrop(treeId, treeNodes, targetNode, moveType){
var nodes = zTree.getSelectedNodes();
var childNodes =zTree.transformToArray(treeNodes);
//目標(biāo)是否是父節(jié)點(diǎn)
zTree = $.fn.zTree.getZTreeObj("treeDemo");
varnode=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(varj=childNodes.length-1;j>i;--j){
if(childNodes[j].pId!=childNodes[j-1].pId)
{
boo=1;
}
}
}
if(moveType=="inner"){
if(boo==1)
{
returnfalse;
}
}
if(targetNode.id=="0")
{
return false;
}
if(targetNode.pId=="0")
{
if(targetNode.name=="封面")
return false;
}
if(targetNode.name=="媒體簡(jiǎn)介"&&moveType=="inner"||targetNode.name=="媒體簡(jiǎn)介"&&moveType=="prev")
{
return false
}
return true;
}
//更新 拖拽目標(biāo)節(jié)點(diǎn)的父節(jié)點(diǎn)排序
functionupdatebeforeDrop(joon,moveType,pId)
{
$.ajax({
type: "POST",
url:"projectBriefAction!updatebeforeDrop",
data:{"name":joon,"moveType":moveType,"pId":pId},
success: function(msg){
}
});
}
//得到拖拽后的json發(fā)送給后臺(tái)解析,進(jìn)行存儲(chǔ)操作
function zTreeOnDrop(event, treeId, treeNodes, targetNode,moveType) {
if(moveType=="prev"||moveType=="next"){
zTree = $.fn.zTree.getZTreeObj("treeDemo");
varnode=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;
};
functionzTreeOnDrag(event, treeId, treeNodes) {
return true;
};
//開(kāi)編輯狀態(tài)不可以使用url onclick實(shí)現(xiàn)
function onclick(event, treeId, treeNode) {
//alert(treeNode.url);
//alert(treeNode.sequenceNumber);
varf=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>
<div>
<ul id="treeDemo"></ul>
</div>
<div id="rMenu">
<ul id="ull">
<span id="m_add_span"><li id="m_add"onclick="addTreeNode();">增加</li></span>
<spanid="update_edit_span"><liid="update_edit"onclick="updateNode();">更改名稱(chēng)</li></span>
<spanid="m_del_span"><li id="m_del"onclick="removeTreeNode();">刪除</li></span>
</ul>
</div>
</div>
</BODY>
</HTML>
<SCRIPTtype="text/javascript">
<!--
var setting = {
view: {
dblClickExpand:false,//需要設(shè)置是否雙擊切換展開(kāi)狀態(tài)的節(jié)點(diǎn) JSON 數(shù)據(jù)對(duì)象
},
edit: {
enable:true,
showRemoveBtn:false,//需要設(shè)置是否顯示刪除按鈕的節(jié)點(diǎn) JSON 數(shù)據(jù)對(duì)象
showRenameBtn:false//需要設(shè)置是否顯示編輯名稱(chēng)按鈕的節(jié)點(diǎn) JSON 數(shù)據(jù)對(duì)象
},
check:{
enable:false,//設(shè)置 zTree 是否開(kāi)啟異步加載模式
nocheckInherit:false,//true 表示 新加入子節(jié)點(diǎn)時(shí),自動(dòng)繼承父節(jié)點(diǎn) nocheck = true 的屬性。
chkboxType:{ "Y": "s", "N": "s" }
},
callback:{
onClick: onclick,//用于捕獲節(jié)點(diǎn)被點(diǎn)擊的事件回調(diào)函數(shù)
onRightClick:OnRightClick,//鼠標(biāo)右鍵點(diǎn)擊時(shí)所在節(jié)點(diǎn)的 JSON 數(shù)據(jù)對(duì)象
onRename:zTreeOnRename,//用于捕獲節(jié)點(diǎn)編輯名稱(chēng)結(jié)束之后的事件回調(diào)函數(shù)。
beforeRename:zTreeBeforeRename,//用于捕獲節(jié)點(diǎn)編輯名稱(chēng)結(jié)束(Input失去焦點(diǎn) 或 按下 Enter 鍵)之后,更新節(jié)點(diǎn)名稱(chēng)數(shù)據(jù)之前的事件回調(diào)函數(shù),并且根據(jù)返回值確定是否允許更改名稱(chēng)的操作
//拖拽
beforeDrag:beforeDrag,//用于捕獲節(jié)點(diǎn)被拖拽之前的事件回調(diào)函數(shù),并且根據(jù)返回值確定是否允許開(kāi)啟拖拽操作
beforeDrop:beforeDrop,//用于捕獲節(jié)點(diǎn)拖拽操作結(jié)束之前的事件回調(diào)函數(shù),并且根據(jù)返回值確定是否允許此拖拽操作
onDrag:zTreeOnDrag,//用于捕獲節(jié)點(diǎn)被拖拽的事件回調(diào)函數(shù)
onDrop:zTreeOnDrop//用于捕獲節(jié)點(diǎn)拖拽操作結(jié)束的事件回調(diào)函數(shù)
},
data: {
simpleData:{
enable:true,//設(shè)置 zTree 是否開(kāi)啟異步加載模式
idKey:"id",//節(jié)點(diǎn)數(shù)據(jù)中保存唯一標(biāo)識(shí)的屬性名稱(chēng)
pIdKey:"pId"http://節(jié)點(diǎn)數(shù)據(jù)中保存其父節(jié)點(diǎn)唯一標(biāo)識(shí)的屬性名稱(chēng)。
}
},
key: {
url:"url"http://特殊用途:當(dāng)后臺(tái)數(shù)據(jù)只能生成 url屬性,又不想實(shí)現(xiàn)點(diǎn)擊節(jié)點(diǎn)跳轉(zhuǎn)的功能時(shí),可以直接修改此屬性為其他不存在的屬性名稱(chēng)
}
};
//右鍵是否顯示刪除,更改,添加按鈕
var zNodes=eval_r(${json});
function OnRightClick(event,treeId, treeNode) {
var nodesss =zTree.getSelectedNodes();
//alert(treeNode.name);
//alert(nodesss.name);
//確定當(dāng)前選中的節(jié)點(diǎn)
for(var i=0;i<nodesss.length;i++)
{
if(nodesss[i].id==treeNode.id){
$("#update_edit").show();
if(treeNode.name!="封面"&&treeNode.name!="媒體簡(jiǎn)介")
{
//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("<liid='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("<liid='m_add'onclick='addTreeNode();'>增加</li>");
}
showRMenu("hide",event.clientX, event.clientY);
}
}
}
}
}
//更具等到不同的參數(shù)顯示不同
function showRMenu(type, x,y) {
$("#rMenuul").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);
}
functiononBodyMouseDown(event){
rMenu = $("#rMenu");
if(!(event.target.id == "rMenu" ||$(event.target).parents("#rMenu").length>0)) {
rMenu.css({"visibility": "hidden"});
}
}
var addCount = 1;
functionaddTreeNode() {
hideRMenu();
var newNode ="";
if(zTree.getSelectedNodes()[0]) {
var nodes = zTree.getSelectedNodes()[0];//當(dāng)前選中節(jié)點(diǎn)對(duì)象
var pid=nodes.id;
vardimensionid=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(); //定義一數(shù)組
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.addN————odes(null,newNode);
}
}
//刪除節(jié)點(diǎn)
function removeTreeNode(){
hideRMenu();
v = "";
var nodes =zTree.getSelectedNodes();//獲取 多選ctrl +的集合
// nodesall = zTree.getCheckedNodes(true);
nodesall = zTree.getSelectedNodes();
var msg = "確定要?jiǎng)h除選中的節(jié)點(diǎn)?,如果刪除將連同子節(jié)點(diǎn)一起刪掉。nn請(qǐng)確認(rèn)!";
if(nodesall.length>1){
if (confirm(msg)==true){
for (vari=0, l=nodesall.length; i<l; i++) {
v += nodesall[i].name + ",";
//獲取選中節(jié)點(diǎn)的id值
zTree.removeNode(nodesall[i]);
delectall(nodesall[i]);
}
}
}else
if (nodes&& nodes.length>0){
if(nodes[0].children &&nodes[0].children.length > 0) {
varmsg = "要?jiǎng)h除的節(jié)點(diǎn)是父節(jié)點(diǎn),如果刪除將連同子節(jié)點(diǎn)一起刪掉。nn請(qǐng)確認(rè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,"")
}
//驗(yàn)證編輯是否可以為空
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){
}
});
}
//給予節(jié)點(diǎn)集合,循環(huán)刪除
functiondelectall(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){
}
});
}
}
//右鍵編輯開(kāi)啟編輯功能
function updateNode()
{
hideRMenu();
var nodes =zTree.getSelectedNodes()[0];
zTree.editName(nodes);
}
//托拽
function beforeDrag(treeId,treeNodes) {
varchildNodes = zTree.getSelectedNodes();
varboo=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;
}
elseif(treeNodes[0].name=="封面"||treeNodes[0].name=="媒體簡(jiǎn)介"){
return false;
}
return true;
}
//拖拽驗(yàn)證
function beforeDrop(treeId,treeNodes, targetNode, moveType) {
var nodes =zTree.getSelectedNodes();
varchildNodes = zTree.transformToArray(treeNodes);
//目標(biāo)是否是父節(jié)點(diǎn)
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=="媒體簡(jiǎn)介"&&moveType=="inner"||targetNode.name=="媒體簡(jiǎn)介"&&moveType=="prev")
{
return false
}
returntrue;
}
//更新 拖拽目標(biāo)節(jié)點(diǎn)的父節(jié)點(diǎn)排序
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;
};
//開(kāi)編輯狀態(tài)不可以使用url onclick實(shí)現(xiàn)
function onclick(event, treeId, treeNode) {
//alert(treeNode.url);
//alert(treeNode.sequenceNumber);
varf=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>
<styletype="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 outsidenone;
background-color:#DFDFDF;
}
</style>
</HEAD>
<BODY>
<div>
<div>
<ulid="treeDemo"></ul>
<div id="rMenu">
<ul id="ull">
<spanid="m_add_span"> <li id="m_add"onclick="addTreeNode();">增加</li></span>
<spanid="update_edit_span"><liid="update_edit"onclick="updateNode();">更改名稱(chēng)</li></span>
<spanid="m_del_span"><li id="m_del"onclick="removeTreeNode();">刪除</li></span>
</ul>
</div>
</BODY>
</HTML>
愛(ài)華網(wǎng)本文地址 » http://www.klfzs.com/a/25101016/317023.html
愛(ài)華網(wǎng)


