JS 树形插件 jsTree 使用小记

最近在开发中遇到要在页面展示无限层级分类的需求，作为后端出身的我，要在 jsp 模板里面写原生的树形结构还是有些吃力的，于是网上找了一圈，发现 jsTree 这个插件的口碑不错，但在实际使用过程中还是遇到了一些小困难，记录下来以便日后检索

基本使用

使用插件当然要先引入插件，此插件也是依赖与 jQuery 的，所以一定要先导入 jQuery，版本要求 1.9.0 以上，我这里偷个懒，直接使用CDN来导入

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

生成树的方式有好几种，可以直接写 ul 套 li 标签，插件会帮你生成好看的树形样式，还有一种就是通过 JSON 数据来生成，我这里用的就是通过 AJAX 请求数据来生成树的，首先在 HTML 中建立一个空的节点，取一个唯一的 id，举例如下：

<div id="treeDemo"></div>

之后就可以通过 js 来生成树啦，先用 jQuery 获取 DOM 对象，接着调用 jsTree 的 API 来生成树，如下所示：

$('#treeDemo').jstree({
    'core': {
        'data': {
            'id' : 'node_1',
            'text' : 'Node'
        }
    }
});

最后生成的效果就是普普通通的文件树，类似于文件夹目录结构，懒得截图就不截了，自行脑补，这里要说一下的就是 data 这个参数都有哪些属性可以来设置，官网的 API 介绍的不全，我在浏览器检查里获取了一下 data 对象，列出 data 参数的所有属性

a_attr: Object // 生成一个a标签节点的属性
li_attr: Object // 生成一个li标签节点的属性
children: Array // 所有子节点数组
data: Object // 此节点的数据（没传过。。）
icon: String // 此节点的图标（没传过。。）
id: String // 节点唯一的id，如果不传会默认生成
original: Object // 后台传过来的这个节点的所有数据
parent: String // 父节点的id
parents: Object // 所有的父节点数组
state: Object // 节点状态，这里面有五个固定属性，可以传默认值
// 分别是“checked”、“disabled”、“loaded”、“opened”、“selected”，均为布尔值
text: String // 节点显示的文本
type: String // 节点的类型，我只用过默认“default”

当然生成树除了 data 参数，还有很多别的参数可以设置，以下写一些我用过的，更详细请查阅官方API文档

$('#treeDemo').jstree({
    // 引入插件
    'plugins': ['checkbox','types','themes','contextmenu'],
    'types': {
        'default': {
            'icon': false  // 删除默认图标
        },
    },
    'checkbox': {  // 去除checkbox插件的默认效果
        'tie_selection': false,
        'keep_selected_style': false,
        'whole_node': false
    },
    'core': {
        'multiple' : true,  // 可否多选
        'data' : nodeData,  // 生成节点的数据，nodeData是后台返回的JSON数据
        'dblclick_toggle': true   //允许tree的双击展开
    },
    'contextmenu': {    // 右键菜单
        'items': {
            'edit': {
                'label': '编辑',
                'action': function (data) {}
            },
            'delete': {
                'label': '删除'
                'action': function (data) {}
            }
        }
    }
});

遇到的坑

基本的用法就在这里，用起来基本上还是比较顺利的，下面来说说不太顺利的，比如如何去刷新一个树，或者说换个数据，如何重新生成，API 里面有刷新的函数用法如下：

$('#treeDemo').jstree(true).refresh();

如果用了你就会发现，除了把页面上所有节点的选中状态都去掉了，其他的并没有用，就算更换了数据源，也并不会生成一棵新的树，达不到我想要的效果，解决办法就是...不要去刷新它，直接销毁掉，然后再重新生成，办法比较土，但我目前没找到更好的办法，销毁树的方法如下：

$('#treeDemo').jstree("destroy");

接下来再说另一个坑，通过右键菜单，我想实现删除某个节点的功能，通过实现右键的监听事件，在API文档中找到了删除节点的函数 delete_node (obj) ，返回一个布尔值，按理说传一个节点对象进去就可以了，可是不管是传对象还是传节点 id，打死就是不对，一直返回 false，获取节点对象的方法如下：

var inst = jQuery.jstree.reference(data.reference)
var node = inst.get_node(data.reference);

看到文档中说可以传个节点 id 的数组来批量删除节点，那好那就来试试吧

$('#treeDemo').jstree(true).delete_node([node.id]);

成功了😂，什么鬼，我明明只要删一个节点，非要让我传个数组。。。那接下来又有问题啦，函数返回删除成功了，可页面上的节点还在啊，这个问题着实困扰了我一天都没有解决，于是在一个加班的夜晚，无意中在官网首页的一个子标签里看到一句话，大意是，你要编辑删除节点的话，要设置 core.check_callback 的值为 true，这么重要的东西为什么藏着这么隐蔽。。为什么不写在 API 文档里。。。于是添加了这个属性就好了，如下所示：

$('#treeDemo').jstree({
    'core': {
        'check_callback': true;
    }
});

总结

没什么可总结的，先写这么多，之后遇到问题再往里面补充，就这样。。。