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

<!DOCTYPE html>
<HTML>
<HEAD>
   <TITLE> ZTREE DEMO - beforeEditName / beforeRemove / onRemove / beforeRename / onRename</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: {
            addHoverDom: addHoverDom,                       //用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
            removeHoverDom: removeHoverDom,                      //用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
            selectedMulti: false                           //设置是否允许同时选中多个节点。
         },
         edit: {
            enable: true,
            editNameSelectAll: true,                        //节点编辑名称 input 初次显示时,设置 txt 内容是否为全选状态。
            showRemoveBtn: showRemoveBtn,                    //设置是否显示删除按钮。
            showRenameBtn: showRenameBtn                     //设置是否显示编辑名称按钮。
         },
         data: {
            simpleData: {
               enable: true
            }
         },
         callback: {
            beforeDrag: beforeDrag,
            beforeEditName: beforeEditName,
            beforeRemove: beforeRemove,
            beforeRename: beforeRename,
            onRemove: onRemove,
            onRename: onRename
         }
      };

      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 beforeEditName(treeId, treeNode) {

         var zTree = $.fn.zTree.getZTreeObj("sys");
         zTree.selectNode(treeNode);

         setTimeout(function() {

            if (confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？")) {                               //0ms 后，执行editName函数

               setTimeout(function() {
                  zTree.editName(treeNode);
               }, 0);

            }
         }, 0);
         return false;
      }

      function beforeRemove(treeId, treeNode) {

         var zTree = $.fn.zTree.getZTreeObj("sys");
         zTree.selectNode(treeNode);
         return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
      }

      function onRemove(e, treeId, treeNode) {

      }

      function beforeRename(treeId, treeNode, newName, isCancel) {

         if (newName.length == 0) {

            setTimeout(function() {

               var zTree = $.fn.zTree.getZTreeObj("sys");
               zTree.cancelEditName();
               alert("节点名称不能为空.");

            }, 0);
            return false;
         }
         return true;
      }

      function onRename(e, treeId, treeNode, isCancel) {

      }

      function showRemoveBtn(treeId, treeNode) {
         return !treeNode.isFirstNode;
      }

      function showRenameBtn(treeId, treeNode) {
         return !treeNode.isLastNode;
      }


      var newCount = 1;
      function addHoverDom(treeId, treeNode) {

         var sObj = $("#" + treeNode.tId + "_span");
         if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;        //如果已经初始化，则返回，否则继续
         var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='add node' onfocus='this.blur();'></span>";        //指定增加按扭的路径
         sObj.after(addStr);

         var btn = $("#addBtn_"+treeNode.tId);

         if (btn) btn.bind("click", function(){                //结增加按扭绑定的事件

            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
            return false;
         });
      };

      function removeHoverDom(treeId, treeNode) {
         $("#addBtn_"+treeNode.tId).unbind().remove();
      };
      
      $(document).ready(function(){
         $.fn.zTree.init($("#sys"), setting, zNodes);
      });
      //-->
   </SCRIPT>
   <style type="text/css">
      .ztree li span.button.add{margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
      /*自定义增加按扭*/
   </style>
</HEAD>

<BODY>
<h1>高级 增 / 删 / 改 节点</h1>
<h6>[ 文件路径: exedit/edit_super.html ]</h6>
<div class="content_wrap">
   <div class="zTreeDemoBackground left">
      <ul id="sys" class="ztree"></ul>
   </div>
</div>
</BODY>
</HTML>
javascript入门 之 zTree（十四 增删查改）（一）

猜你喜欢

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