z-tree ： 前端开发必须掌握的树形结构插件

一、tree 中文翻译

tree 这个单词在中文里有很多种不同的翻译，比如：树，数，木，线。但是在前端中，tree 通常被翻译成 “树形结构” 这个词汇。所谓树形结构就是通过父-子节点信息，将所有节点构建成一颗树。树形结构被广泛应用于文件夹目录结构、商品分类结构、组织架构结构等多个场合。

二、如何获取ztree选取

通过选择 ztree 插件中的节点，我们可以实现很多有意思的功能。比如：树形结构展开收起，节点的编辑删除等操作。ztree 提供了两种默认的选取方式：单选 和 多选。

// 单选
var setting = {
    view: {
        selectedMulti: false
    }
};

// 多选
var setting = {
    check: {
        enable: true,
        chkStyle: "checkbox"
    }
};

三、z-tree 的初始化

ztree 的初始化很简单。 首先需要引入 jQuery 和 ztree 相关的 js 和 css。然后通过一个 \

标签构建出一个空的树坑。最后，通过 ztree 的初始化方法初始化这个树坑即可。

<link rel="stylesheet" href="style/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ztree.all.min.js"></script>


<ul id="myTree" class="ztree"></ul>


<script>
    $(document).ready(function(){
        var setting = {};
        var zNodes = [];
        $.fn.zTree.init($("#myTree"), setting, zNodes);
    });
</script>

四、节点的编辑和删除

ztree 插件提供了丰富的节点操作事件。我们通过监听这些事件，就可以实现节点的编辑和删除操作。

节点编辑事件：

// 节点编辑事件
var setting = {
    edit: {
        enable: true,
        showRemoveBtn: false,
        showRenameBtn: false,
        drag: {
            isCopy: true,
            isMove: true,
            prev: true,
            next: true,
            inner: true
        }
    }
};

//监听节点编辑完成事件
function onRename(e, treeId, treeNode, isCancel){
    console.log(treeNode.name);
}

节点删除事件：

// 节点删除事件
var setting = {
    edit: {
        enable: true,
        showRemoveBtn: true,
    }
};

//监听节点删除事件
function beforeRemove(treeId, treeNode){
    if(confirm("确认删除吗？")){
        return true;
    }else{
        return false;
    }
}

五、z-tree 的搜索功能

ztree 插件提供了搜索节点的功能。 通过给树形结构的每个节点添加 webkit 及 moz 属性，使节点标签能够隐式地呈现在页面上，这样就可以通过浏览器自带的搜索功能进行节点的搜索。这个特性非常实用。

//搜索设置
var setting = {
    view: {
        addDiyDom: addDiyDom,
        nameIsHTML: true,
        fontCss: setFontCss
    },
    data: {
        simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pid",
            rootPId: 0
        }
    },
    callback: {
        onClick: onClick,
        onRightClick: OnRightClick,
        beforeRemove: beforeRemove,
        onRename: onRename,
        beforeEditName: beforeEditName,
        onExpand: onExpand,
        onAsyncSuccess: onAsyncSuccess,
    }
};

六、多颗树的操作

在实际开发中，我们经常需要处理多颗树之间的关系。比如：两棵树之间的拖拽、树之间的复制合并等操作。ztree 插件本身并不提供这方面的支持，但是我们可以通过一些技巧解决这个问题。这里我推荐一个叫做“TreeBridge”的开源项目。TreeBridge 提供了跨树操作的支持，使用非常简单：

// 加载 TreeBridge 依赖
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="TreeBridge.js"></script>

// 创建树
var tree1 = $.fn.zTree.init($("#tree1"), setting ,zNodes1);
var tree2 = $.fn.zTree.init($("#tree2"), setting ,zNodes2);

// 连接两棵树
var tb = new $.treebridge(tree1,tree2);

七、总结

ztree 是一个非常实用的树形插件，它可以让前端开发人员在处理树形结构数据时事半功倍。本文主要介绍了 ztree 的一些基础用法，包括：tree 的中文翻译、ztree 选取、ztree 初始化、节点的编辑和删除、ztree 的搜索功能，以及多颗树的操作等方面。当然，ztree 的功能还远远不止这些，有兴趣的同学可以去官网查看详细文档。