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. 解决yum错误:Cannot retrieve repository metadata (repomd.xml) for repository

    解决方法如下: # cd /etc/ #ls 找到yum.repos.d这个目录,里面有个文件CentOS-Media.repo(你的机器里也许不是这个名字,名称应该是自定义的),vi 编译一下里面的 ...

  2. FFrpc python客户端lib

    摘要: Ffrpc可以很方便的构建c++ server, 在网游服务器程序开发中,进程间通讯非常的重要,比如gateserver和gameserver或dbserver之间的通信.而ffrpc可以使得 ...

  3. CHECK MEMBER TYPE

    检查类里是否存在某种类型的几种方法,以检查xxx类型为例:方法1: template<class T> class has_member_type_Type { ]; }; templat ...

  4. [原创]Android系统中常用JAVA类源码浅析之HashMap

    由于是浅析,所以我只分析常用的接口,注意是Android系统中的JAVA类,可能和JDK的源码有区别. 首先从构造函数开始, /** * Min capacity (other than zero) ...

  5. JAVA IO NIO

    http://www.cnblogs.com/handsome1013/p/4882862.html http://www.cnblogs.com/dolphin0520/ http://www.cn ...

  6. Swift 字符与字符串

    Swift 的 String 和 Character 类型

  7. [LeetCode] Number of Islands II

    Problem Description: A 2d grid map of m rows and n columns is initially filled with water. We may pe ...

  8. 生成证书时Distribution下面App Store and Ad Hoc 选项不能选择的原因及解决办法

    出现这个问题的原因是:发布用的证书创建是有数量限制的,仅支持3个,所以把原先不用的证书Revoke掉就可以了

  9. MySQL Cluster 集群

    本文转载 http://www.cnblogs.com/gomysql/p/3664783.html MySQL Cluster是一个基于NDB Cluster存储引擎的完整的分布式数据库系统.不仅仅 ...

  10. 推荐一款炫酷的提示框插件SweetAlert

    官方网址 http://t4t5.github.io/sweetalert/ 项目地址 https://github.com/t4t5/sweetalert