zoukankan      html  css  js  c++  java
  • 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="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 -->

  • 相关阅读:
    网页特效代码
    禁止直接在浏览器输入网址访问的代码
    javaScriptalert使用方法
    URL中特殊字符的含义
    Predator:比微软Kinect更强的视频追踪算法来自捷克博士论文(转)
    干净简洁的CSS表单设计实例
    javascript IP 正则表达
    开发者最容易犯的13个JavaScript错误(转)
    一个帮助你处理延迟,重复,循环操作的jQuery插件 timing
    【简报】微软Metro/win8风格的web开发框架 BootMetro
  • 原文地址:https://www.cnblogs.com/rocky-fang/p/5258392.html
Copyright © 2011-2022 走看看