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 ...
随机推荐
- PyCharm远程连接服务器简明教程
转自本人知乎(https://zhuanlan.zhihu.com/p/149040742) 由于实验室的GPU都是放在远程服务器上,因此一直使用MobaXterm利用SSH远程跑实验,但是MobaX ...
- 从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏
项目体验地址 免费视频教程 游戏介绍 幸运水果机是一款街机游戏,游戏界面由24个方格拼接成一个正方形,每个方格中都有一个不同的水果图形,方格下都有一个小灯.玩家使用游戏币选择希望押注的目标,按下开始后 ...
- vue入门的第一天：v-clock、v-text、v-html的使用
vue入门的第一天 1. v-cloak v-cloak可以解决插值闪烁问题(防止代码被人看见),在元素里加入 v-cloak即可 html: <p v-cloak>{{msg}}< ...
- 动力节点 mysql 郭鑫 34道经典的面试题
DROP TABLE IF EXISTS `dept`; CREATE TABLE `dept` ( `DEPTNO` int(2) NOT NULL COMMENT '部门编号', `DNAME` ...
- 输入url后浏览器干了些什么(详解)
输入url后浏览器干了些什么(详解) DNS(Domain Name System, 域名系统) 解析 DNS解析的过程就是寻找哪台机器上有你真正需要的资源过程.但你在浏览器张红输入一个地址时,例如: ...
- py4j.protocol.Py4JJavaError: An error occurred while calling z:org.apache.spark.api.python.PythonRDD.collectAndServe. : java.lang.IllegalArgumentException: Unsupported class file major version 55
今天小编用Python编写Spark程序报了如下异常: py4j.protocol.Py4JJavaError: An error occurred while calling z:org.apach ...
- python根据列表创建文件夹，拷贝指定文件
内容涉及:关键字定位,列表去重复,路径组装,文件夹创建,文件拷贝,字符串分割 list.txt的内容为包含关键字的文件路径,如:关键字 ’181‘ org/20190523/1/20190523201 ...
- [USACO11JAN]Roads and Planes G【缩点+Dij+拓补排序】
题目 Farmer John正在一个新的销售区域对他的牛奶销售方案进行调查.他想把牛奶送到T个城镇 (1 <= T <= 25,000),编号为1T.这些城镇之间通过R条道路 (1 < ...
- 重学 Java 设计模式：实战观察者模式「模拟类似小客车指标摇号过程，监听消息通知用户中签场景」
作者:小傅哥 博客:https://bugstack.cn - 原创系列专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 知道的越多不知道的就越多 编程开发这条路上的知识是无穷无尽的, ...
- 112买卖股票的最佳时机II
from typing import List# 这道题和上一题很类似,但有一些不同,每天都可以买入,或者卖出# 那么利润最大化,就是i + 1 天的价格比i天的价格高的时候买入# 然后在i + 1天 ...