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 -->

  • 相关阅读:
    无人转会申请
    【Alpha】“北航社团帮”小程序v1.0项目展示
    【Alpha】“北航社团帮”小程序v1.0测试报告
    【Alpha】“北航社团帮”小程序v1.0发布声明
    【Alpha】Scrum meeting 10
    编译原理:文法和语言总结与梳理
    编译原理:语法树,短语,直接短语,句柄
    编译原理:理解文法和语文
    编译原理:了解编译原理
    MySQL8版本的安装与卸载教程
  • 原文地址:https://www.cnblogs.com/rocky-fang/p/5258392.html
Copyright © 2011-2022 走看看