javascript入门之 zTree（十四增删查改）（二）

<!DOCTYPE html>
<HTML>
<HEAD>
   <TITLE> ZTREE DEMO - addNodes / editName / removeNode / removeChildNodes</TITLE>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
   <link rel="stylesheet" href="../bower_components/ztree/css/zTreeStyle/demo.css" type="text/css">
   <link rel="stylesheet" href="../bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
   <script type="text/javascript" src="../bower_components/ztree/js/jquery-1.4.4.min.js"></script>
   <script type="text/javascript" src="../bower_components/ztree/js/jquery.ztree.core-3.5.js"></script>
   <script type="text/javascript" src="../bower_components/ztree/js/jquery.ztree.excheck-3.5.js"></script>
   <script type="text/javascript" src="../bower_components/ztree/js/jquery.ztree.exedit-3.5.js"></script>
   <SCRIPT type="text/javascript">
      <!--
      var setting = {
         view: {
            selectedMulti: false
         },
         edit: {
            enable: true,
            showRemoveBtn: false,
            showRenameBtn: false
         },
         data: {
            keep: {
               parent:true,                           //zTree 的节点父节点属性锁，是否始终保持 isParent = true
               leaf:true                             //zTree 的节点叶子节点属性锁，是否始终保持 isParent = false
            },
            simpleData: {
               enable: true
            }
         },
         callback: {
            beforeDrag: beforeDrag,
            beforeRemove: beforeRemove,
            beforeRename: beforeRename,
            onRemove: onRemove
         }
      };

      var zNodes =[
         { id:1, pId:0, name:"父节点 1", open:true},
         { id:11, pId:1, name:"叶子节点 1-1"},
         { id:12, pId:1, name:"叶子节点 1-2"},
         { id:13, pId:1, name:"叶子节点 1-3"},
         { id:2, pId:0, name:"父节点 2", open:true},
         { id:21, pId:2, name:"叶子节点 2-1"},
         { id:22, pId:2, name:"叶子节点 2-2"},
         { id:23, pId:2, name:"叶子节点 2-3"},
         { id:3, pId:0, name:"父节点 3", open:true},
         { id:31, pId:3, name:"叶子节点 3-1"},
         { id:32, pId:3, name:"叶子节点 3-2"},
         { id:33, pId:3, name:"叶子节点 3-3"}
      ];

      function beforeDrag(treeId, treeNodes) {
         return false;
      }
      function beforeRemove(treeId, treeNode) {
         return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
      }
      function onRemove(e, treeId, treeNode) {
      }
      function beforeRename(treeId, treeNode, newName) {
         if (newName.length == 0) {
            alert("节点名称不能为空.");
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            setTimeout(function(){zTree.editName(treeNode)}, 10);
            return false;
         }
         return true;
      }

      var newCount = 1;
      function add(e) {
         var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
         isParent = e.data.isParent,
         nodes = zTree.getSelectedNodes(),
         treeNode = nodes[0];
         if (treeNode) {                      //如果选中了结点是给该结点增加子结点，如果没有选中，则是给根结点添加子结点
            treeNode = zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, isParent:isParent, name:"new node" + (newCount++)});
         } else {
            treeNode = zTree.addNodes(null, {id:(100 + newCount), pId:0, isParent:isParent, name:"new node" + (newCount++)});
         }
         if (treeNode) {
            zTree.editName(treeNode[0]);            //设置某节点进入编辑名称状态。
         } else {                              //如果增加失败则提示
            alert("叶子节点被锁定，无法增加子节点");
         }
      };
      function edit() {
         var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
         nodes = zTree.getSelectedNodes(),
         treeNode = nodes[0];
         if (nodes.length == 0) {
            alert("请先选择一个节点");
            return;
         }
         zTree.editName(treeNode);                 //编辑结点名称
      };
      function remove(e) {
         var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
         nodes = zTree.getSelectedNodes(),
         treeNode = nodes[0];
         if (nodes.length == 0) {
            alert("请先选择一个节点");
            return;
         }
         var callbackFlag = $("#callbackTrigger").attr("checked");
         zTree.removeNode(treeNode, callbackFlag);     //表示执行此方法时不触发事件回调函数（依据callbackFlag）
      };
      function clearChildren(e) {                      //删除所有子结点
         var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
         nodes = zTree.getSelectedNodes(),
         treeNode = nodes[0];
         if (nodes.length == 0 || !nodes[0].isParent) {
            alert("请先选择一个父节点");
            return;
         }
         zTree.removeChildNodes(treeNode);
      };
      
      $(document).ready(function(){
         $.fn.zTree.init($("#treeDemo"), setting, zNodes);
         $("#addParent").bind("click", {isParent:true}, add);
         $("#addLeaf").bind("click", {isParent:false}, add);
         $("#edit").bind("click", edit);
         $("#remove").bind("click", remove);
         $("#clearChildren").bind("click", clearChildren);
      });
      //-->
   </SCRIPT>
</HEAD>

<BODY>
<div class="content_wrap">
   <div class="zTreeDemoBackground left">
      <ul id="treeDemo" class="ztree"></ul>
   </div>
   <div class="right">
      <input type="checkbox" id="callbackTrigger" checked /> removeNode 方法是否触发 callback<br/>
      [ <a id="addParent" href="#" title="增加父节点" οnclick="return false;">增加父节点</a> ]
      [ <a id="addLeaf" href="#" title="增加叶子节点" οnclick="return false;">增加叶子节点</a> ]
      [ <a id="edit" href="#" title="编辑名称" οnclick="return false;">编辑名称</a> ]<br/>
      [ <a id="remove" href="#" title="删除节点" οnclick="return false;">删除节点</a> ]
      [ <a id="clearChildren" href="#" title="清空子节点" οnclick="return false;">清空子节点</a> ]<br/>
   </div>
</div>
</BODY>
</HTML>
javascript入门 之 zTree（十四 增删查改）（二）

javascript入门之 zTree（十四增删查改）（二）
