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（十四增删查改）（一）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRe ...
Nhibernate入门篇连接Sqlserver的增删查改
第一步:创建数据库 create table Emp( EmpId int primary key identity, EmpName ), EmpDate date ) 第二步:去官网下载:http ...
javascript入门之 ztree (十 checkbox选中事件)
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...
javascript入门之 ztree（四自定义Icon）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Standard Data </TITLE& ...
MongoDB入门学习(三)：MongoDB的增删查改
对于我们这样的菜鸟来说,最重要的不是数据库的管理,也不是数据库的性能,更不是数据库的扩展,而是怎么用好这款数据库,也就是一个数据库提供的最核心的功能,增删查改. 由于M ...
用javascript实现html元素的增删查改[xyytit]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
【OpenCV入门教程之十四】OpenCV霍夫变换：霍夫线变换，霍夫圆变换合辑
http://blog.csdn.net/poem_qianmo/article/details/26977557 本系列文章由@浅墨_毛星云出品,转载请注明出处. 文章链接:http://blog ...
[课本]JDBC课程6--使用JDBC的DAO模块化--完成数据库的增删查改_工具类JDBCTools四个(Preparedstatement)功能模块的敲定版
(课本P273-任务九) /**DAO: Data Access Object * 为什么用: 实现功能的模块化,更有利于代码的维护和升级 * 是什么: 访问数据信息的类,包含对数据的CRUD(cre ...
利用dbutils工具实现数据的增删查改操作(dbutis入门)
一.前期准备 1.安装数据库(如:mysql5.5) 2.安装Eclipse(如:3.4) 3.下载数据库驱动包 4.下载dbutis工具包 5.在Eclipse创建名为 dbutils 的工程并在工 ...

随机推荐

express模块中的req，res参数的常用属性方法
express模块中的req,res参数的常用属性方法 const express = require('express'); const router = express.Router() rout ...
C++:利用全局钩子实现键盘锁
在家看网课,记笔记不方便.于是就想弄个键盘锁,方便学习(在寝室也好把外接键盘放上去打游戏). 其实这东西挺简单的,就三行代码. HHOOK hk; LRESULT CALLBACK kbproc(in ...
增删改查-java（新手）
PreparedStatement: 方法: Connection: 方法: 实例: 1.查询: package cn.chuang.JdbcDome; import java.sql.*; pu ...
CSS重构：样式表性能调优
这两天窝在家里又看了本CSS相关的书:<CSS重构:样式表性能调优>.重构是指在不改变代码行为的前提下,重写代码,使其更加简洁.易于复用. 这本书读起来比较快,可挑自己感兴趣的读,前面三章 ...
入门Python实现七夕表白神器
from PIL import Image, ImageDraw, ImageFont font_size = 7 #This var can change the Word's blank size ...
Journal of Proteome Research | Quantitative Subcellular Proteomics of the Orbitofrontal Cortex of Schizophrenia Patients （精神分裂症病人眶额叶皮层亚细胞结构的定量蛋白质组学研究）（解读人：王聚）
期刊名:Journal of Proteome Research 发表时间:(2019年10月) IF:3.78 单位: 里约热内卢联邦大学坎皮纳斯州立大学坎皮纳斯州立大学神经生物学中心卡拉博大 ...
STL篇--list容器
list容器: 1.list 容器的本质就是双向环形链表,最后一个节点刻意做成空节点,符合容器的左闭右开的原则2.list 的迭代器是一个智能指针,其实就是一个类,通过操作符重载模拟各种操作(++ ...
关于PS切图
现在前端项目中碰到越来越多的图片处理问题,虽然找自己公司UI小哥哥小姐姐可以解决,但是每次都找不仅要看别人有没有时间,更得看人家脸色唉,自己摸索着来吧(多图,流量党请注意切换WiFi): 通常切图的 ...
Django之路由层和视图层详解
路由层首先我们来看一下,路由层都有哪些东西,其实你看django很人性化,将所有的介绍都放在了简介里面,不信,你看
SpringCloud系列之服务注册发现（Eureka）应用篇
@ 目录前言项目版本 Eureka服务端 Eureka客户端服务访问前言大家好,距离上周发布的配置中心基础使用已过去差不多一周啦,趁着周末继续完善后续SpringCloud组件的集成,本次代 ...

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

javascript入门 之 zTree（十四 增删查改）（二）的更多相关文章

随机推荐

热门专题

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

javascript入门之 zTree（十四增删查改）（二）的更多相关文章