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的更多相关文章

  1. javascript入门 之 zTree(十四 增删查改)(二)

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...

  2. ztree-可拖拽可编辑的树

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...

  3. ztree-编辑节点(树节点添加,删除,修改)

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...

  4. js-DOM控制HTML

    一. dom对象控制html    HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML).    HTML DOM ...

  5. (Qt 翻译) QGLSceneNode

    #include <QGLSceneNode> QGLSceneNode ( QObject * parent = 0 ) QGLSceneNode ( const QGeometryDa ...

  6. JAVAscript学习笔记 jsDOM 第五节 (原创) 参考js使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 第二章 JavaScript总结(下)

    js参考表 变量的引用 <script> var n=10; m = 10; //全局变量 function a () { var x = 10; //局部变量 b = 10;//全局变量 ...

  8. 第二章 JavaScript案例(中)

    1. js事件 HTML代码 <!DOCTYPE html> <html lang="en" onUnload="ud()"> < ...

  9. JS DOM对象控制HTML元素详解

    JS DOM对象控制HTML元素详解 方法: getElementsByName()  获取name getElementsByTagName()  获取元素 getAttribute()  获取元素 ...

随机推荐

  1. 配置新系统(Win7 x64)

    新装了一个Win7 x64系统.总结了一些系统配置需要注意的地方. 1. C盘空间 发现C盘被用去了50G的空间,在什么软件都没装的情况下,被用去这么多,感到不可思议. 打开控制面板->文件夹选 ...

  2. 用Wireshark简单分析HTTP通信

    我们都学过TCP,HTTP的相关概念,本文借助协议分析工具Wireshark,让大家对一些概念眼见为实,权当温故而知新. 场景: 在Client(10.239.196.211)上通过web brows ...

  3. ffmpeg中的sws_scale算法性能测试

    经常用到ffmpeg中的sws_scale来进行图像缩放和格式转换,该函数可以使用各种不同算法来对图像进行处理.以前一直很懒,懒得测试和甄 别应该使用哪种算法,最近的工作时间,很多时候需要等待别人.忙 ...

  4. 译:C#面向对象的基本概念 (Basic C# OOP Concept) 第二部分(封装,抽象,继承)

    6.封装 封装就是对外部类隐藏成员或变量.我已经说过房子的保安仅仅被限制在房子的入口处,不需要知道屋内发生了什么.房主对保安隐藏了屋内所发生的任何事,以便更安全.隐藏和限制就被称为封装. 例如我们有两 ...

  5. 云极知客开放平台接口调用方法(C#)

    云极知客为企业提供基于SAAS的智能问答服务.支持企业个性化知识库的快速导入,借助语义模型的理解和分析,使企业客户立即就拥有本行业的24小时客服小专家.其SAAS模式实现零成本投入下的实时客服数据的可 ...

  6. java框架篇---spring aop两种配置方式

    第一种:注解配置AOP 注解配置AOP(使用 AspectJ 类库实现的),大致分为三步: 1. 使用注解@Aspect来定义一个切面,在切面中定义切入点(@Pointcut),通知类型(@Befor ...

  7. ExtJs Column 显示文字内容过长 使用Tootip显示全部内容

    { text: 'Column Header Blah', dataIndex: 'blah', renderer: function(value, metaData, record, rowIdx, ...

  8. 使用docker搭建nfs实现容器间共享文件

    首先介绍下今天的两个主角:nfs和docker nfs 是什么 NFS(Network File System)即网络文件系统,是FreeBSD支持的文件系统中的一种,它允许网络中的计算机之间通过TC ...

  9. Java--解决java compiler level does not match the version of the installed java project facet错误

    从网上下载了个项目,导入eclipse时发现如下错误: 检查后发现原来是JDK版本不一致的问题,项目的默认JDK配置是1.5,而自己电脑上是1.7. 需要修改两个地方的配置,如下图所示: 修改一: 修 ...

  10. TFS(Team Foundation Server)敏捷使用教程(四):工作项跟踪(1)

    工作项跟踪(1) 可跟踪性是软件过程的重要能力,TFS主要是以工作项来实现过程的可跟踪性.曾有人问:"你们实际项目里的工作项是怎么样的?能不能让我们看看?"我也一直很好奇别的公司T ...