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" onclick="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()
    }
  });
});