ztree-编辑节点（树节点添加，删除，修改）
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - addNodes / editName / removeNode / removeChildNodes</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 setting = {
view: {
selectedMulti: false
},
edit: {
enable: true,
showRemoveBtn: false,
showRenameBtn: false
},
data: {
keep: {
parent:true,
leaf:true
},
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag,
beforeRemove: beforeRemove,
beforeRename: beforeRename,
onRemove: onRemove
}
}; var zNodes =[
{ id:1, pId:0, name:"节点1", open:false},
{ id:11, pId:1, name:"节点1-1"},
{ id:12, pId:1, name:"节点1-2"},
{ id:121, pId:12, name:"节点1-2-1"},
{ id:122, pId:12, name:"节点1-2-2"},
{ id:123, pId:12, name:"节点1-2-3"},
{ id:3, pId:0, name:"节点3", open:false},
{ id:31, pId:3, name:"节点3-1"},
{ id:32, pId:3, name:"节点3-2"},
{ id:33, pId:3, name:"节点3-3"}
]; var log, className = "dark";
function beforeDrag(treeId, treeNodes) {
return false;
}
function beforeRemove(treeId, treeNode) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeRemove ] " + treeNode.name);
console.log()
var children = treeNode.children;
if(children!=undefined && children.length>0){
alert("请先删除子节点");
return false;
}
return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
}
function onRemove(e, treeId, treeNode) {
showLog("[ "+getTime()+" onRemove ] " + treeNode.name);
}
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;
}
function showLog(str) {
if (!log) log = $("#log");
log.append("<li class='"+className+"'>"+str+"</li>");
if(log.children("li").length > 8) {
log.get(0).removeChild(log.children("li")[0]);
}
}
function getTime() {
var now= new Date(),
h=now.getHours(),
m=now.getMinutes(),
s=now.getSeconds(),
ms=now.getMilliseconds();
return (h+":"+m+":"+s+ " " +ms);
} var newCount = 1;
function add(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
isParent = e.data.isParent,
nodes = zTree.getSelectedNodes(),
treeNode = nodes[0];
if (treeNode) {alert(1)
treeNode = zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, isParent:isParent, name:"new node" + (newCount++)});
} else {alert(2)
treeNode = zTree.addNodes(null, {id:(100 + newCount), pId:0, isParent:isParent, name:"new node" + (newCount++)});
}
if (treeNode) {alert(3)
zTree.editName(treeNode[0]);
} else {alert(4)
alert("叶子节点被锁定，无法增加子节点");
}
}; function addParent(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
isParent = e.data.isParent,
nodes = zTree.getSelectedNodes(),
treeNode = nodes[0];
treeNode = zTree.addNodes(null, {id:(100 + newCount), pId:0, isParent:isParent, name:"new node" + (newCount++)});
zTree.editName(treeNode[0]);
};
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);
};
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}, addParent);
$("#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>
<input type="checkbox" id="callbackTrigger" checked /> removeNode 方法是否触发 callback<br/>
[ <a id="addParent" href="#" title="增加父节点" onclick="return false;">增加父节点</a> ]
[ <a id="addLeaf" href="#" title="增加叶子节点" onclick="return false;">增加叶子节点</a> ]
[ <a id="edit" href="#" title="编辑名称" onclick="return false;">编辑名称</a> ]<br/>
[ <a id="remove" href="#" title="删除节点" onclick="return false;">删除节点</a> ]
[ <a id="clearChildren" href="#" title="清空子节点" onclick="return false;">清空子节点</a> ]<br/>
</div>
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</BODY>
</HTML>
ztree-编辑节点（树节点添加，删除，修改）的更多相关文章
- Dom4j 操作， 节点查找 添加 删除 修改 。。。xPath
转: Dom4j 操作, 节点查找 添加 删除 修改 ...xPath 2013年11月28日 10:48:59 今晚打酱油8 阅读数:8506更多 个人分类: JavaWeb 版权声明:本文为博 ...
- JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作
html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick=&q ...
- JTree 添加 , 删除, 修改
package com.swing.demo; import java.awt.BorderLayout; import java.awt.Container; import java.awt.eve ...
- SQL语句添加删除修改字段及一些表与字段的基本操作
用SQL语句添加删除修改字段 1.增加字段 alter table docdsp add dspcode char(200)2.删除字段 ALTER TABLE table_NA ...
- Entity framework 绑定到Datagridview的添加删除修改
Entity framework 绑定到Datagridview的添加删除修改 using System; using System.Collections.Generic; using System ...
- 用SQL语句添加删除修改字段、一些表与字段的基本操作、数据库备份等
用SQL语句添加删除修改字段 1.增加字段 alter table docdsp add dspcode char(200) 2.删除字段 ALTER TABLE table_NAME DROP CO ...
- SQL语句添加删除修改字段[sql server 2000/2005]
用SQL语句添加删除修改字段1.增加字段 alter table docdsp add dspcodechar(200)2.删除字段 ALTER TABLE table_NAME ...
- SQL语句添加删除修改字段
用SQL语句添加删除修改字段1.增加字段 alter table docdsp add dspcodechar(200)2.删除字段 ALTER TABLE table_NAME ...
- dir（dict）|字典的创建-添加-删除-修改-判断存在-取值等相关操作
dir(dict) ####字典操作:创建-添加-删除-修改-判断存在-取值 #(一)创建字典: {} .等号. zip(). [(),()] #1.创建空字典 dict0 = {} #2.等号创建 ...
- sqlserverdatasouce控件如何让添加删除修改自动化
对于sqlserverdatasouce控件,添加插入修改和删除命令,可以自动删除修改更新数据,不需要编写一行代码,但是有时更新失败,原因在于选中了[开放式并发],这个选中,如果该表与其他的数据表关联 ...
随机推荐
- [Codechef TASTR] Level of Difference - 后缀数组,容斥原理
[Codechef TASTR] Level of Difference Description 给定两个字符串,求恰好在一个字符串中出现过的本质不同的子串数量. Solution 设 \(U(S)\ ...
- HTML列表,表格与媒体元素
一.无序列表 <ul> <li>无序列表</li> <li>有序列表</li> <li>自定义列表</li> < ...
- redhat 桌面系统配置
1.grouplist命令 yum grouplist 回车 2. yum groupinstall "GNOME Desktop" "Graphical Admini ...
- Hibernate的基本工作原理
Hibernate开发过程中会用到5个核心接口: 1.Configuration2.SessionFactory3.Session4.Transaction5.QueryHibernate就是通过这些 ...
- windows查询端口，杀进程
C:\Users\chenquan>tasklist | findstr 4720Thunder.exe 4720 Console 1 3,456 K C:\Users\chenquan> ...
- HDU1074 Doing Homework（状压dp）
链接:http://acm.hdu.edu.cn/showproblem.php?pid=1074 题意:给定有n门课的作业,每门课交作业有截止时间,和完成作业所花费的时间,如果超过规定时间完成,每超 ...
- vue.js + element中el-select实现拼音匹配，分词、缩写、多音字匹配能力
1.既然要用到拼音搜索,我们就需要一个拼音库,在这里我推荐一个第三方包:https://github.com/xmflswood/pinyin-match,在这里首先对这个包的开发者表示万分的感谢. ...
- javascript fp demo
function eq (y) { return function forX(x) { return x === y } } function mod (y) { return function fo ...
- Virtual Judge POJ 3278 Catch That Cow
#include<iostream> #include<cstdio> #include<cstring> #include<cmath> #inclu ...
- 美化git commit历史
为什么要美化commit历史? 答:假如一个分支的多次意义相近的 commit,会把整个提交历史搞得很混乱, 此时可以将几个commit 合并为一个 commit,以美化整个 commit 历史. 怎 ...