你的位置:首页 > Java教程

[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" >
      <div >
         <div >
            <div >
               <button type="button" data-dismiss="modal" aria-hidden="true" >×</button>
               <h4 id="myModalLabel" >确认删除该部门吗? </h4>
            </div>
            <div >
            </div>
            <div >
                <button type="button" id="department_settings_delete_sure" data-dismiss="modal"  >确定</button>
               <button type="button" id="department_settings_delete_cancel" data-dismiss="modal" >取消</button>
            </div>
         </div>
      </div>
   </div>
   <!-- end modal -->