ztree addNode editName removeNode
1.ztree api中完全拥有以上操作的相关解释,及简单Demo。
2.主要是要学会将单独的效果组合起来使用。
2.1 如: 添加完新的Node节点之后,怎么立即进入新节点的编辑状态来修改名称(或者在添加新节点之前怎么输入节点名称)。
var zTree = $.fn.zTree.getZTreeObj("departmentTree");
//创建新节点,并保存新节点的引用
var new_node = zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
//进入编辑名称的状态
zTree.editName(new_node[0]);
2.2 如: 怎么在删除节点时,先提示是否确认。
原来函数,绑定在setting.callback.beforeRemove
function beforeRemove(treeId, treeNode) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeRemove ] " + treeNode.name);
var zTree = $.fn.zTree.getZTreeObj("departmentTree");
zTree.selectNode(treeNode);
return confirm("删除节点 -- " + treeNode.name + " 吗?");
}
改变,插入模态框。
function beforeRemove(treeId, treeNode) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeRemove ] " + treeNode.name);
sureDeleteDeptSetModal(treeNode);
return false;
}
function sureDeleteDeptSetModal(treeNode){
$("#department_settings_delete_modal").modal();
$("#department_settings_delete_sure").click(function(){
var zTree = $.fn.zTree.getZTreeObj("departmentTree");
zTree.removeNode(treeNode);
});
$("#department_settings_delete_cancel").click(function(){
return false;
});
}
模态框:
<!-- START modal-->
<div id="department_settings_delete_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal">
<div class="modal-dialog" style="width:800px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
<h4 id="myModalLabel" class="modal-title">确认删除该部门吗? </h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" id="department_settings_delete_sure" data-dismiss="modal" class="btn btn-default">确定</button>
<button type="button" id="department_settings_delete_cancel" data-dismiss="modal" class="btn btn-default">取消</button>
</div>
</div>
</div>
</div>
<!-- end modal -->
ztree addNode editName removeNode的更多相关文章
- javascript入门 之 zTree(十四 增删查改)(二)
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...
- ztree-可拖拽可编辑的树
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...
- ztree-编辑节点(树节点添加,删除,修改)
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...
- js-DOM控制HTML
一. dom对象控制html HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM ...
- (Qt 翻译) QGLSceneNode
#include <QGLSceneNode> QGLSceneNode ( QObject * parent = 0 ) QGLSceneNode ( const QGeometryDa ...
- JAVAscript学习笔记 jsDOM 第五节 (原创) 参考js使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 第二章 JavaScript总结(下)
js参考表 变量的引用 <script> var n=10; m = 10; //全局变量 function a () { var x = 10; //局部变量 b = 10;//全局变量 ...
- 第二章 JavaScript案例(中)
1. js事件 HTML代码 <!DOCTYPE html> <html lang="en" onUnload="ud()"> < ...
- JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解 方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
随机推荐
- java&postgresql时区总结
介绍这篇文章之前,首先回答一个问题,以前都没有时区的概念,程序也写的好好的,为什么要计算时区哪?举个例子,比如有一个订单的时间是:2015-07-04 11:28:19,那么咋一看没什么问题,可是如果 ...
- 【Xamarin报错】libpng warning : iCCP: Not recognizing known sRGB profile that has been edited
报错: Xamarin Android 编译时发生以下错误: libpng warning : iCCP: Not recognizing known sRGB profile that has be ...
- U3D包大小优化之microlib
当迩想把最小类库发上来,迩需要把Stripping Level设置为Use micro mscorlib 这里是MICROLIB所能使用的包的类库列表:http://docs.unity3d.com/ ...
- ux.form.field.KindEditor 所见所得编辑器
注意需要引入KindEditor相关资源 //所见所得编辑器 Ext.define('ux.form.field.KindEditor', { extend: 'Ext.form.field.Text ...
- [MONGODB]: WHEN ARBITER REQUIRED FOR REPLICA SET
October 27, 2015 · by Srinivas · in MongoDB MongoDB replica sets provide a number of features that ...
- MyBatis知多少(1)
SQL (Structured Query Language,结构化查询语言)己经存在很长一段时间了.自从第一次提出“数据可以被规范化为一组相互关联的表”这样的思想以来,已经超过35年了. 从那时起, ...
- fusioncharts图例(legend)属性
图例用来在多系列图和混合图中将图形和对应的系列名称联系起来. 从v3.2开始,每个系列的名称前面会展示对应的icon图标,这些图标具有交互作用,用户可以通过点击这些图标来显示或者隐藏对应的数 ...
- java中getBytes方法可能使图片文件产生的问题
InputStream is = new FileInputStream(fl); ImageInputStream iis = ImageIO.createImageInputStream(is); ...
- 启动weblogic的错误:Could not obtain an exclusive lock to the embedded LDAP data files directory
http://hi.baidu.com/kaisep/item/0e4bf6ee5da001d1ea34c986 源地址 启动weblogic的错误:Could not obtain an exclu ...
- Hadoop第5周练习—MapReduce计算气象温度等例子
:对云计算的看法 内容 :使用MapReduce求每年最低温度 内容 :求温度平均值能使用combiner吗? 内容 :使用Hadoop流求最高温度(awk脚本) 内容 :使用Hadoop流求最高温度 ...