zTree使用实例

var this_;    var this_id;    var this_name;    var this_data;    var this_pId;    var p_tId;    //zTree配置开始    $(".zTreeDom_close").click(function(){//关闭zTree按钮    $(".zTreeDom").hide();    $("#treeDemo").hide();    })    $("#zTreeDom_save").click(function(){//保存数据    $("#ztree_add").hide();    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");var child = treeObj.getNodes();var ztreeNodes = [];function children (child) {for(var i = 0; i < child.length; i++){var data = {name:child[i].name,data:child[i].data};ztreeNodes.push(data);var childs = child[i].children;if(childs == undefined){continue;}else{children(childs);}}}children (child)console.log(ztreeNodes);    })            $(document).mousedown(function(){//右键的小菜单消失    $("#ztreeRight").hide();    });    $("#ztreeRight_add").mousedown(function(){    $("#ztree_add").show();    $("#add_content").find("input").eq(0).val("");$("#add_content").find("input").eq(1).val("");    })    $("#ztreeRight_remove").mousedown(function(){//确定是否删除节点弹框    var c = confirm("是否删除")    if(c == true){    var ztree = $.fn.zTree.getZTreeObj("treeDemo");    ztree.removeNode(this_);             //删除节点    }      })            $("#add_save").click(//弹框保存按钮    function(){    this_name = $("#add_content").find("input").eq(0).val();    this_data = $("#add_content").find("input").eq(1).val();    var rag = /^\s$/;if(rag.test(this_name) || rag.test(this_data) || this_name == "" || this_data == ""){    return alert("请输入内容");    }    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");        //添加节点    var newNode = {name:this_name, data:this_data};    treeObj.addNodes(this_, newNode);    $("#ztree_add").hide();    }    )    $(".add_close").click(//弹框关闭按钮    function(){    $("#ztree_add").hide();    }    )                var dragId;    var p_tId;var setting = {view: {selectedMulti: false, //禁止多选addHoverDom: addHoverDom, //当鼠标移动到节点上时，显示用户自定义控件          removeHoverDom: removeHoverDom, //离开节点时的操作  },edit: {enable: true, //zTree是否可编辑showRemoveBtn: true,//是否显示删除节点按钮showRenameBtn: false,//是否显示编辑按钮removeTitle: "删除",drag: {          prev: true, //拖拽节点，是否允许放在目标节点前          next: true, //拖拽节点，是否允许放在目标节点后          inner: false //拖拽节点，是否允许放在目标节点里        },//editNameSelectAll: true},data: {simpleData: {enable: true //初始化或添加节点时，是否使用简单的Arr数据}},callback: {beforeRemove: beforeRemove,beforeDrag: beforeDrag, beforeDrop: beforeDrop, //拖拽之前，是否允许拖拽beforeRightClick:beforeRightClick,onRightClick: rightClick //右键事件  }}; var zNodes =[{ id:1, pId:0, name:"总公司", open:true,data:20},{ id:2, pId:1, name:"一分公司", open:true},{ id:3, pId:2, name:"总经办", open:true},{ id:4, pId:3, name:"总经理", open:true},{ id:7, pId:3, name:"销售经理"},{ id:8, pId:3, name:"售后经理"},{ id:9, pId:1, name:"二分公司",open:true}];function addHoverDom(treeId, treeNode) {  //自定义hover添加节点var sObj = $("#" + treeNode.tId + "_span"); //获取名字节点信息      if (treeNode.level >= 3 || treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0){//最多出现一个加号按钮    return;    }     var addStr = "<span class='ztreeAddBtn button' id='addBtn_" + treeNode.tId + "' title='添加' data-target='#myModal' onfocus='this.blur();'></span>"; //定义添加按钮      sObj.after(addStr); //在名字后面添加按钮      var btn = $("#addBtn_"+treeNode.tId);//获取当前按钮btn.bind("click", function(event){  //添加按钮点击效果this_ = treeNode;$("#add_content").find("input").eq(0).val("");$("#add_content").find("input").eq(1).val("");$("#ztree_add").show();$("#ztree_add").css({left:event.clientX+$(document).scrollLeft()+100,top:event.clientY+$(document).scrollTop()-50});});    }function removeHoverDom(treeId, treeNode) {  //自定义hover添加节点$("#addBtn_"+treeNode.tId).unbind().remove();  }function beforeRemove(treeId, treeNode) {//hover删除按钮var c = confirm("是否删除");if(c){return true;}else{return false;}}function beforeDrag(treeId, treeNodes) {//拖拽之前获取当前的pIdfor (var i=0; i<treeNodes.length; i++) {   dragId = treeNodes[i].pId;   p_tId = treeNodes[i].getParentNode().tId;}return true;}function beforeDrop(treeId, treeNodes, targetNode, moveType) {  if(targetNode.pId == dragId && targetNode.getParentNode().tId == p_tId){//如果pId不同则不能拖拽过去    return true;  }else{        return false;      }}function beforeRightClick(treeId, treeNode) {if(treeNode != null){//只有右键点击文件才会出现小菜单return true;}else{return false;}};function rightClick(event, treeId, treeNode){//小菜单出现的位置以及出现的条件console.log(treeNode);this_pId = treeNode.pId;this_id = treeNode.id;this_ = treeNode;$("#ztreeRight").show();$("#ztreeRight").css({left:event.clientX+$(document).scrollLeft(),top:event.clientY+$(document).scrollTop()});if(treeNode.level >= 3){$("#ztreeRight_add").hide();}else{$("#ztreeRight_add").show();}};function selectAll() {var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");};$(document).ready(function(){$.fn.zTree.init($("#treeDemo"), setting, zNodes);$("#selectAll").bind("click", selectAll);});    //zTree配置结束

<img src="http://img.blog.csdn.net/20161019132828048?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />