<!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. html5 拖放购物车

    1.本例中模仿了购物车添加的功能 主要运用了ondragstart / ondragover/ ondrag 功能 功能比较简单 遗留问题:火狐下图片拖进会被打开 <!doctype html& ...

  2. 记Android R(SDK=30)系统执行UiAutomator1.0异常

    最近Android发布了AndroidStudio 3.6稳定版,升级后明显能体验到好多细节的提升,最大的提升莫过于可以创建Android R预览版的模拟器了,并且模拟器可以设置多个尺寸的屏幕.And ...

  3. Python进阶学习之面向对象

    目录 面向对象 私有属性 面向对象   python也有面向对象的编程,它与C++中的类有点相似.它也只是运算符重载,继承. class Test: num=0 def __init__(self): ...

  4. 数据科学中的常见的6种概率分布(Python实现)

    作者:Pier Paolo Ippolito@南安普敦大学 编译:机器学习算法与Python实战(微信公众号:tjxj666) 原文:https://towardsdatascience.com/pr ...

  5. 计算机网络 Computer Networks​ 期末复习总提纲

    平时不学习,期末火葬场. 一周时间靠王道考研和各路 pdf 自学计网,留下的提纲都在这里了.全是干货.全文 pdf 可以在这里下载:http://cloud.billc.io/s/xNHarppQPG ...

  6. Java已五年1—二本物理到前端实习生到Java程序员「回忆贴」

    关键词:郑州 二本 物理专业 先前端实习生 后Java程序员 更多文章收录在码云仓库:https://gitee.com/bingqilinpeishenme/Java-Tutorials 前言 没有 ...

  7. 增删改查-java(新手)

     PreparedStatement: 方法: Connection: 方法:  实例: 1.查询: package cn.chuang.JdbcDome; import java.sql.*; pu ...

  8. File的获取功能(新手)

    //导入包.import java.io.File;/*File的获取功能*///创建的一个类.public class zylx2 { //公共静态的主方法. public static void ...

  9. java-根据用户输入的成绩来判断等级(新手)

    //创建的一个包名. package qige; //导入的一个包.import java.util.Scanner; //定义一个类.public class Zy2 { //公共静态的主方法. p ...

  10. 【Springboot】用Prometheus+Grafana监控Springboot应用

    1 简介 项目越做越发觉得,任何一个系统上线,运维监控都太重要了.关于Springboot微服务的监控,之前写过[Springboot]用Springboot Admin监控你的微服务应用,这个方案可 ...