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