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. Core Animation一些Demo总结 (动态切换图片、大转盘、图片折叠、进度条等动画效果)

    前一篇总结了Core Animation的一些基础知识,这一篇主要是Core Animation 的一些应用,涉及到CAShapeLayer.CAReplicatorLayer等图层的知识. 先看效果 ...

  2. Multipart/form-data POST文件上传详解

    Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...

  3. Android之线程回掉更新ui

    一:工作线程中的回掉更新UI public class MainActivity extends AppCompatActivity { private int i; private Callback ...

  4. BZOJ 1251 序列终结者(Splay)

    题目大意 网上有许多题,就是给定一个序列,要你支持几种操作:A.B.C.D.一看另一道题,又是一个序列要支持几种操作:D.C.B.A.尤其是我们这里的某人,出模拟试题,居然还出了一道这样的,真是没技术 ...

  5. Three.js源码阅读笔记-5

    Core::Ray 该类用来表示空间中的“射线”,主要用来进行碰撞检测. THREE.Ray = function ( origin, direction ) { this.origin = ( or ...

  6. [Ubuntu] bash: warning: setlocale: LC_ALL: cannot change locale

    问题症状 -bash: warning: setlocale: LC_ALL: cannot change locale (en_US.utf8) 解决方法 本地化是指不同地区用户在键盘上输入不同语言 ...

  7. java中DatagramSocket连续发送多个数据报包时产生丢包现象解决方案

    try { //向指定的ip和端口发送数据~! //先说明一下数据是谁发送过来的! byte[] ip = InetAddress.getLocalHost().getHostAddress().ge ...

  8. Git 版本管理

    应用情景1:添加文件(单个.多个.目录)到Git版本库,提交一个版本快照. 应用情景2:穿越历史回到过去,版本回退,从当前版本回退到之前提交过的某个版本上. 应用情景3:穿越历史过头了,版本回退多了, ...

  9. ECMASCRIPT 6中字符串的新特性

    本文将覆盖在ECMAScript 6 (ES6)中,字符串的新特性. Unicode 码位(code point)转义 Unicode字符码位的长度是21位[2].而JavaScript的字符串,是1 ...

  10. Tip8:Unity中诸如 Awake() Start() Update()等函数的 执行顺序

    Unity脚本中有很多的事件函数,下面是各种函数的执行顺序: 1.reset(); 2.Awake(); 3.OnEnable; 4.OnLevelWasLoaded(); 5.Start(); 6. ...