jQuery zTree插件使用

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>

<!--

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>

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>

</ul>

</div>

</BODY>

</HTML>

<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});

   $("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 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) {

       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>

</ul>
</div>
</BODY>
</HTML>

jQuery zTree插件使用

相关推荐