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() 获取元素 ...
随机推荐
- 【Cocos2d-x 3.X 资源及脚本解密】
加密就不用说了,看上一篇2.X加密的方式,怎么弄都可以.的保证解密规则就行: 现在重点说3.X解密: 在新的3.X引擎中官方整合了大部分获取资源的方法,最终合成一个getdata: 可以从源码,和堆栈 ...
- Spring Boot 之 RESRful API 权限控制
摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! “简单,踏实~ 读书写字放屁” 一.为何用RESTful API 1.1 RESTful是什么? ...
- MTNET 自用ios网络库开源
短短两天就在https://git.oschina.net/gangwang/MTNET这里收获15个星 github 5星, 值得收藏! MTNET 自用ios网络库开源, 自用很久了,在数歀上架的 ...
- 实例学习Backbone.js(一)
前面有两篇文章介绍了Backbone的model.collection和view,那么接下来我想用一个完整的Demo来记录我学习的过程, 单页操作,实现数据的增删改,后台使用json做数据库,通过re ...
- Unity3d导出Android的apk文件时相关问题的解决办法
今天上午着手将一个unity3d开发的小游戏build到android手机上运行,结果遇到了不少问题. 首先遇到的第一个问题是在build到一半的时候,弹出如下报错: Error building P ...
- SharePoint 2013中修改windows 活动目录(AD)域用户密码的WebPart(免费下载)
前段时间工作很忙,好久没更新博客了,趁国庆休假期间,整理了两个之前积累很实用的企业集成组件,并在真正的大型项目中经受住了考验:.Net版SAP RFC适配器组件和SharePoint 2013修改AD ...
- Traffic Lights
Traffic Lights time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...
- [原]SQLite的学习系列之获取数据库版本
最先了解到SQLite是基于其作为移动客户端数据存储平台,以下是其官网(https://www.sqlite.org/)关于SQLite的一段介绍: SQLite是遵守ACID的轻型数据库引擎,它包含 ...
- 队列queue的C实现
头文件—————————————————————————————— #ifndef _QUEUE_H_ #define _QUEUE_H_ #include <stdlib.h> #def ...
- C#中处理耗时任务的几种方式
0.准备 首先,我们先创建几个耗时任务: public class TestTasks { //无参.无返回值任务 public void Task1() { Console.WriteLine(&q ...