ztree

公司项目需要用到ztree，所以花了一天时间看了ztree的api做了一个项目需要用到的demo

1安装

去到ztree官网下载https://gitee.com/zTree/zTree_v3

2需要用到的包

require('./ztree/jquery.ztree.all.min')
require('./ztree/jquery.ztree.core.min')
require('./ztree/jquery.ztree.excheck.min')
require('./ztree/jquery.ztree.exedit.min')
require('./ztree/jquery.ztree.exhide.min')

3html代码

<ul id="treeDemo" class="ztree"></ul>

在原来的基础上做了一个右键编辑菜单

<div class="my-menu" id="Menu">
<div class="menu-item" data-index="1">
  添加文件
</div>
<div class="menu-item" data-index="2">
  删除文件
</div>
<div class="menu-item" data-index="3" οnclick="rename()">
  重命名
</div>
<div class="menu-item" data-index="4">
  取消
</div>
</div>

4js代码

var setting = {
  view: {
    dblClickExpand: false,
  },
  edit: {
    enable: false,
    renameTitle: "编辑节点名称"
  },
  callback: {
    onRightClick: OnRightClick,
    onDblClick: zTreeOnDblClick
  }
};

var zNodes =[
  {id:2, name:"右键操作 2", open:true,
    children:[
      {id:21, name:"节点 2-1"},
      {id:22, name:"节点 2-2"},
      {id:23, name:"节点 2-3"},
      {id:24, name:"节点 2-4"}
    ]},
  {id:3, name:"右键操作 3", open:true,
    children:[
      {id:31, name:"节点 3-1"},
      {id:32, name:"节点 3-2"},
      {id:33, name:"节点 3-3"},
      {id:34, name:"节点 3-4"}
    ]}
];

function OnRightClick(event, treeId, treeNode) {
  if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
    zTree.cancelSelectedNode();
    showRMenu("root", event.clientX, event.clientY);
  } else if (treeNode && !treeNode.noR) {
    zTree.selectNode(treeNode);
    showRMenu("node", event.clientX, event.clientY);
  }
}

function showRMenu(type, x, y) {
  $("#Menu").show();
  if (type=="root") {
    $("#m_del").hide();
    $("#m_check").hide();
    $("#m_unCheck").hide();
  } else {
    $("#m_del").show();
    $("#m_check").show();
    $("#m_unCheck").show();
  }

  y += document.body.scrollTop;
  x += document.body.scrollLeft;
  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){
  if (!(event.target.id

      == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
    rMenu.css({"visibility" : "hidden"});
  }
}
var addCount = 1;
//增加
window.addTreeNode = function(){
  hideRMenu();
  var newNode = { name:"增加" + (addCount++)};
  if (zTree.getSelectedNodes()[0]) {
    newNode.checked = zTree.getSelectedNodes()[0].checked;
    zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
  } else {
    zTree.addNodes(null, newNode);
  }
}
//删除
window.removeTreeNode = function(){
  hideRMenu();
  var nodes = zTree.getSelectedNodes();
  if (nodes && nodes.length>0) {
    if (nodes[0].children && nodes[0].children.length > 0) {
      var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
      if (confirm(msg)==true){
        zTree.removeNode(nodes[0]);
      }
    } else {
      zTree.removeNode(nodes[0]);
    }
  }
}
//改名
window.rename=function(){
  hideRMenu();
  var nodes = zTree.getSelectedNodes(),
    treeNode = nodes[0];
  if (nodes.length == 0) {
    alert("请先选择一个对象");
    return;
  }
  zTree.editName(treeNode);
}
//双击子节点改名
function zTreeOnDblClick(event, treeId, treeNode) {
  hideRMenu();

  var nodes = zTree.getSelectedNodes(),
    treeNode = nodes[0];
  if (nodes.length == 0) {
    alert("请先选择一个对象");
    return;
  }
  zTree.editName(treeNode);
};

var zTree, rMenu;
$(document).ready(function(){
  $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  zTree = $.fn.zTree.getZTreeObj("treeDemo");
  rMenu = $("#Menu");
  $(document).bind("click",function(e){
    $('#Menu').hide()
    return;
  });
  $('#Menu').bind("mousedown",function(event){
    event.stopPropagation();//重点，需要防止冒泡

    //改名代码放到了html代码里，因为遇到一个小bug
    if(event.target.dataset['index']==1){
      addTreeNode()
    }
    if(event.target.dataset['index']==2){
      removeTreeNode()
    }
    if(event.target.dataset['index']==4){
      $('#Menu').hide()
    }
  });
});