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() 获取元素 ...
随机推荐
- [原]OpenGL基础教程(二)多边形绘制
上篇介绍了最基本的三角形绘制,本篇介绍如何使用索引的方式绘制多边行. 为什么要使用索引方式,总体来说提高性能.如何提高:使用顶点数组的好处是避免大量的函数调用.即避免每画一个顶点就调用1次glVert ...
- JS实现移动端图片延迟加载
图片延迟加载常见的有,jquery.lazyload.js,原生JS实现的echo.js.但是都是必须给图片设置宽高. 因为项目是移动端,而且无法在加载前知道图片的宽高,所以,只好自己写了一个. 既然 ...
- Android复制assets目录下的图片到内存
转自:http://www.chenwg.com/android/android%E5%A4%8D%E5%88%B6assets%E7%9B%AE%E5%BD%95%E4%B8%8B%E7%9A%84 ...
- HTML5新特性之跨文档消息传输
1.同域限制 所谓“同域限制”是指,出于安全考虑,浏览器只允许脚本与同样协议.同样域名.同样端口的地址进行通信. 2.window.postMessage方法 浏览器限制不同窗口(包括iFrame窗口 ...
- ASP.NET MVC 获取当前访问域名
var request = filterContext.HttpContext.Request; string url = request.Url.Authority; string function ...
- 十八、【开源】EnterpriseFrameWork框架核心类库之Winform控制器
回<[开源]EnterpriseFrameWork框架系列文章索引> EFW框架源代码下载:http://pan.baidu.com/s/1qWJjo3U EFW框架中的WinContro ...
- java 动态创建数据库和动态连接数据库
项目中有一个需求要动态创建数据库并且要动态连接数据库,本来以为还很难实现呢,在网上找了好久,都不是很理想,最后看到有人说创建数据库时,先连接到任意一个数据库,获得连接后用createStatement ...
- 我是如何用Go语言搭建自己的博客的
前言: 话说,已经很久没有在博客园更新博客了,之前写的关于go语言的系列学习文章<让我们一起Go>也由于种种原因一度中断.但是,正如我之前在文章中所写,可以慢慢来,但是对于Go语言的学习却 ...
- SNF开发平台WinForm之十四-站内发送系统信息-SNF快速开发平台3.3-Spring.Net.Framework
1运行效果: 2开发实现: .组装站内信息发送实体对象. SNFService SNFService = new SNFService(); if (this.ucUser.SelectedIds ! ...
- NOP登录验证管理
截取Nop登录代码如下: 其实 public ActionResult Login(LoginModel model, string returnUrl, bool captchaValid) { / ...