<!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' οnfοcus='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（十四 增删查改）（一）的更多相关文章

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

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...

  2. Nhibernate入门篇连接Sqlserver的增删查改

    第一步:创建数据库 create table Emp( EmpId int primary key identity, EmpName ), EmpDate date ) 第二步:去官网下载:http ...

  3. javascript入门 之 ztree (十 checkbox选中事件)

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...

  4. javascript入门 之 ztree（四 自定义Icon）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Standard Data </TITLE& ...

  5. Bootstrap入门（二十四）data属性

    Bootstrap入门(二十四)data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码.这是 Bootstrap 中的一 ...

  6. MongoDB入门学习(三)：MongoDB的增删查改

            对于我们这样的菜鸟来说,最重要的不是数据库的管理,也不是数据库的性能,更不是数据库的扩展,而是怎么用好这款数据库,也就是一个数据库提供的最核心的功能,增删查改.         由于M ...

  7. 用javascript实现html元素的增删查改[xyytit]

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 【OpenCV入门教程之十四】OpenCV霍夫变换：霍夫线变换，霍夫圆变换合辑

    http://blog.csdn.net/poem_qianmo/article/details/26977557 本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://blog ...

  9. [课本]JDBC课程6--使用JDBC的DAO模块化--完成数据库的增删查改_工具类JDBCTools四个(Preparedstatement)功能模块的敲定版

    (课本P273-任务九) /**DAO: Data Access Object * 为什么用: 实现功能的模块化,更有利于代码的维护和升级 * 是什么: 访问数据信息的类,包含对数据的CRUD(cre ...

随机推荐

  1. 玩转控件:重写/重绘Dev中MessageBox弹窗控件

    很久没有更新博客了,本想着直接发一篇<手撕ERP>系列,从控件重写.重绘,到框架搭建,再到部分模块实现+业务的.但是每次动手的时候,都觉得难以下手.直接从数据库设计开始吧,模块设计还没定下 ...

  2. 03.文件I/O

    UNIX系统中的大多数文件I/O只需用到5个函数:open.read.write.lseek和close. 本章所说明的函数称为不带缓冲的I/O.不带缓冲指的是每个read和write都调用内核中的一 ...

  3. HTTP中主要的头字段

    HTTP中主要的头字段 头字段类型 含义 备注 通用头:适用于请求和响应消息的头字段 Date 表示请求和响应生成的日期   Pragma 表示数据是否允许缓存的通信选项   Cache-Contro ...

  4. python编码的原理以及写入文件中乱码的原因

    1.unicode可以理解为世界上所有字符的集合,它不对应二进制编码 2.详见: https://blog.csdn.net/qq_33692803/article/details/81321340 ...

  5. 手把手教你学Git

    Git 使用手册独家实战 0.查看本机公钥 步骤: 1.进入.ssh目录 cd ~/.ssh 2.找到id_rsa.pub文件 ls / ll 3.查看文件 cat id_rsa.pub JackFe ...

  6. 02 Python函数与模块

     • 函数是什么 print() input() format() list() lower() upper()  • 函数的定义 def 函数名(形参1,2,3)  函数体 return  • 函数 ...

  7. OpenCV-Python 轮廓分层 | 二十五

    目标 这次我们学习轮廓的层次,即轮廓中的父子关系. 理论 在前几篇关于轮廓的文章中,我们已经讨论了与OpenCV提供的轮廓相关的几个函数.但是当我们使用cv.findcontour()函数在图像中找到 ...

  8. PyTorch 实战-张量

    Numpy 是一个非常好的框架,但是不能用 GPU 来进行数据运算. Numpy is a great framework, but it cannot utilize GPUs to acceler ...

  9. 知识图谱与机器学习｜KG入门 -- Part2 建立知识图谱

    介绍 在本系列前面两篇文章中我一直在讨论Data Fabric,并给出了一些关于Data Fabric中的机器学习和深度学习的概念.并给出了我对Data Fabric的定义: Data Fabric是 ...

  10. DeepMind爆出无监督表示学习模型BigBiGAN，GAN之父点赞！

    [导读]今天,DeepMind爆出一篇重磅论文,引发学术圈热烈反响:基于最强图像生成器BigGAN,打造了BigBiGAN,在无监督表示学习和图像生成方面均实现了最先进的性能!Ian Goodfell ...