ztree : 增删改功能demo与自定义DOM功能demo的结合
最近有个项目要用ztree，需要用ztree自带的功能（增删改），也需要自定义DOM的功能（置顶）。
ztree的demo里有增删改的demo，也有自定义DOM的demo，但没有两者结合的。
所以我把demo改了一下，两个功能合在了一起。
上代码。
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - edit</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
<!--
var IDMark_Switch = "_switch",
IDMark_Icon = "_ico",
IDMark_Span = "_span",
IDMark_Input = "_input",
IDMark_Check = "_check",
IDMark_Edit = "_edit",
IDMark_Remove = "_remove",
IDMark_Ul = "_ul",
IDMark_A = "_a"; var setting = {
edit: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag
},
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom
}
}; 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 setEdit() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
remove = $("#remove").attr("checked"),
rename = $("#rename").attr("checked"),
removeTitle = $.trim($("#removeTitle").get(0).value),
renameTitle = $.trim($("#renameTitle").get(0).value);
zTree.setting.edit.showRemoveBtn = remove;
zTree.setting.edit.showRenameBtn = rename;
zTree.setting.edit.removeTitle = removeTitle;
zTree.setting.edit.renameTitle = renameTitle;
showCode(['setting.edit.showRemoveBtn = ' + remove, 'setting.edit.showRenameBtn = ' + rename,
'setting.edit.removeTitle = "' + removeTitle +'"', 'setting.edit.renameTitle = "' + renameTitle + '"']);
}
function showCode(str) {
var code = $("#code");
code.empty();
for (var i=0, l=str.length; i<l; i++) {
code.append("<li>"+str[i]+"</li>");
}
} function addHoverDom(treeId, treeNode) {
if (treeNode.parentNode && treeNode.parentNode.id!=1) return;
var aObj = $("#" + treeNode.tId + IDMark_A);
if (treeNode.id == 11) {
if ($("#diyBtn_"+treeNode.id).length>0) return;
var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' > </span><span class='button icon03' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'></span>";
aObj.append(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
}
} function removeHoverDom(treeId, treeNode) {
if (treeNode.parentTId && treeNode.getParentNode().id!=1) return;
console.log("???")
if (false) {
$("#diyBtn1_"+treeNode.id).unbind().remove();
$("#diyBtn2_"+treeNode.id).unbind().remove();
} else if (treeNode.id == 11) {
$("#diyBtn_"+treeNode.id).unbind().remove();
$("#diyBtn_space_" +treeNode.id).unbind().remove();
}
} $(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
setEdit();
$("#remove").bind("change", setEdit);
$("#rename").bind("change", setEdit);
$("#removeTitle").bind("propertychange", setEdit)
.bind("input", setEdit);
$("#renameTitle").bind("propertychange", setEdit)
.bind("input", setEdit);
});
//-->
</SCRIPT>
<style type="text/css">
.ztree li span.demoIcon{padding:0 2px 0 10px;}
.ztree li span.button.icon01{margin:0; background: url(../../../css/zTreeStyle/img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon02{margin:0; background: url(../../../css/zTreeStyle/img/diy/4.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon03{margin:0; background: url(../../../css/zTreeStyle/img/diy/5.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon04{margin:0; background: url(../../../css/zTreeStyle/img/diy/6.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon05{margin:0; background: url(../../../css/zTreeStyle/img/diy/7.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon06{margin:0; background: url(../../../css/zTreeStyle/img/diy/8.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
</style>
</HEAD> <BODY>
<h1>基本 增 / 删 / 改 节点</h1>
<h6>[ 文件路径: exedit/edit.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1、setting 配置信息说明</h2>
<ul class="list">
<li>此 Demo 仅从功能上演示编辑节点的基本方法和配置参数</li>
<li class="highlight_red">1)、使用 编辑功能，必须设置 setting.edit 中的各个属性，详细请参见 API 文档中的相关内容</li>
<li class="highlight_red">2)、使用 编辑功能的事件回调函数，必须设置 setting.callback.beforeRemove / onRemove / beforeRename / onRename 等属性，详细请参见 API 文档中的相关内容</li>
<li class="highlight_red">3)、zTree 不提供默认的增加按钮，如需实现请利用自定义控件的方法 addHoverDom / removeHoverDom ，详细请参见 API 文档中的相关内容；另外也可以参考 "高级 增 / 删 / 改 节点" 的 Demo</li>
<li><p>基本编辑按钮设置：<br/>
<input type="checkbox" id="remove" class="checkbox first" checked /><span>显示删除按钮</span>
<input type="checkbox" id="rename" class="checkbox " checked /><span>显示编辑按钮</span><br/>
remove 按钮的 title: <input type="text" id="removeTitle" value="remove" /><br/>
rename 按钮的 title: <input type="text" id="renameTitle" value="rename" />
<ul id="code" class="log" style="height:85px;"></ul></p>
</li>
</ul>
</li>
<li class="title"><h2>2、treeNode 节点数据说明</h2>
<ul class="list">
<li>对 节点数据 没有特殊要求，用户可以根据自己的需求添加自定义属性</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
以上。
ztree : 增删改功能demo与自定义DOM功能demo的结合的更多相关文章
- JavaWeb系统（增删改查、多条件查询功能）
该系统是一个简单的青年服务管理系统,主要包括了较完整的常用的增删改查以及多条件查询功能,对于初学者有很大帮助. 下面是相关的Java代码.jsp页面.以及数据库的创建和相关表的设计 java代码 首先 ...
- JS增删改查localStorage实现搜索历史功能
<script type="text/javascript"> var referrerPath = "@ViewBag.ReferrerPath" ...
- JavaScript HTML DOM增删改查
首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对HTML元素进行增删改查. 1 查找DOM 第一种方式是我们最常用的 ...
- IOS之分析网易新闻存储数据(CoreData的使用，增删改查)
用过网易新闻客户端的朋友们都知道,获取新闻列表时有的时候他会请求网络有时候不会,查看某条新闻的时候再返回会标注已经查看的效果,接下来分析一下是如何实现的. 首先: 1.网易新闻用CoreData存储了 ...
- SpringBoot JPA + H2增删改查示例
下面的例子是基于SpringBoot JPA以及H2数据库来实现的,下面就开始搭建项目吧. 首先看下项目的整体结构: 具体操作步骤: 打开IDEA,创建一个新的Spring Initializr项目, ...
- ASP.NET CORE系列【三】使用Entity Framework Core进行增删改查
身份验证 以前我们熟悉的web.config中配置的form验证,现在没有了.我们来看看在Core里面如何配置: 首先需要NuGet安装一个包:Microsoft.AspNetCore.Authent ...
- 总结：mysql的各种增删改查！
(原创总结)分为数据库的增删改查,数据表(和字段)的增删改查,数据的增删改查 三部分!// 创建用户并授权 GRANT SELECT ON bodydb.user TO us@localhost ID ...
- JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件
JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...
- 手把手教你ASP.NET Core：使用Entity Framework Core进行增删改查
新建表Todo,如图 添加模型类 在"解决方案资源管理器"中,右键单击项目. 选择"添加" > "新建文件夹". 将文件夹命名为 Mo ...
随机推荐
- ATM项目分析
ATM项目分析 项目源代码下载 其实本项目的需求分析乍一看比较复杂,但是细细拆分出来实际实现还是比较容易的.基本用上前面所学的所有知识点. 1.额度 15000或自定义 2.实现购物商场,买东西加入购 ...
- 重学ASP.NET Core 中的标记帮助程序
标记帮助程序是什么 标记帮助程序使服务器端代码可以在 Razor 文件中参与创建和呈现 HTML 元素. 例如,内置的 ImageTagHelper 可以将版本号追加到图片名称. 每当图片发生变化时 ...
- 入门大数据---Hbase是什么?
一.Hbase是什么? Hbase属于NoSql的一种. NoSql数据库分为如下几类: Key-Value类型数据库 这类数据库主要会使用到一个哈希表,这个表有一个特定的键和一个指针指向特定的数据. ...
- python实现简单的SVM
# -*- coding: utf-8 -*- from sklearn.svm import SVC import numpy as np print(X.shape,Y.shape) X = np ...
- MongoDB快速入门教程 （4.1）
4.Mongoose使用 4.1.nodejs操作mongodb 文档地址:http://mongodb.github.io/node-mongodb-native/3.2/tutorials/cru ...
- Js数据类型、Json格式、Json对象、Json字符串
数据类型,从结构上看,所有的数据最终都可以分成三种类型: 第一种类型是scalar(标量),也就是一个单独的string(字符串)或数字(numbers),比如“北京”这个单独的词. 第二种类型是se ...
- 浅谈auth模块
目录 auth模块 什么是Auth模块 auth模块的常用方法 用户注册 扩展默认的auth_user表 auth模块 什么是Auth模块 auth模块是对注册登录认证注销修改密码等方法的一种封装 ...
- 路由网关（Zuul）
上一篇已经讲了微服务组件中的 分布式配置中心,本章讲述 由JAVA编写的服务路由网关Zuul… - Zuul 路由是微服务体系结构的一个组成部分.例如 / 可以映射到您的Web应用程序,/api/us ...
- 安装完kali linux之后要做的10件事——113p.cn
1.添加国内更新源(可能不是最好的) vim /etc/apt/source.list 科技大学# deb http://mirrors.ustc.edu.cn/kali sana main non- ...
- Swoole 中 TCP、UDP 和长连接、短连接
TCP 服务 swoole 文档 - TCP 服务 tcp 服务端 <?php // 1. 创建 swoole 默认创建的是一个同步的阻塞tcp服务 $host = "0.0.0.0& ...