07.03 如何实现 新增节点的按钮 —— 关于 节点编辑

简介

在 7.01 默认的编辑、删除功能 中已经说过，由于本人当初脑筋短路，没有把新增节点的按钮加入到 zTree 的默认功能中来，到后期为了避免老用户升级带来的不兼容，就只能一直延续下来了。对此给大家（尤其是新用户们）带来的困惑表示歉意！

看这篇文档时，你需要对照 API 文档进行学习（http://www.treejs.cn/v3/api.php）

参考Demo：http://www.treejs.cn/v3/demo.php#_305

css 准备

经常有朋友模仿 Demo 制作新增按钮时，忘了把 Demo 中的 style 复制到 zTreeStyle.css 中，导致新增按钮无法正常显示。

.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}

一定要把上面这行样式 加到 zTreeStyle.css 当中哟！

js 代码

如果你已经学习了 zTree 的自定义控件，那么对于新增按钮的代码你将不会陌生。

// 这里只把与 新增按钮密切相关的代码提取出来
var setting = {
    view: {
        addHoverDom: addHoverDom,
        removeHoverDom: removeHoverDom
    }
};

var newCount = 1;
function addHoverDom(treeId, treeNode) {
    // addHoverDom 回调函数可能会被多次触发
    // 所以一定要先判断该节点的新增按钮是否已经添加
    if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) {
        return;
    }
    // 生成新增按钮的 html
    // 新增按钮的主要样式还是使用了 zTree 默认按钮的样式，所以这里面的 className: button 非常重要
    var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='add node' onfocus='this.blur();'></span>";
    // 获取节点名称的 DOM
    var sObj = $("#" + treeNode.tId + "_span");
    sObj.after(addStr);
    // 对 新增按钮绑定事件
    var btn = $("#addBtn_"+treeNode.tId);
    if (btn) btn.bind("click", function(){
        // 这里面完全可以按照你自己的需求做修改
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
        return false;
    });
};

function removeHoverDom(treeId, treeNode) {
    // 移除 新增按钮
    $("#addBtn_"+treeNode.tId).unbind().remove();
};

其实就是这么简单，即实现了 新增按钮，又学习了自定义控件的制作方式，不难吧？？