JS树形插件"jsTree"使用小记

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

博客原文连接：http://onee.top/2017/03/jstree/
Github：https://github.com/VOREVER
个人主页：https://wangyu.space/

基本使用

使用插件当然要先引入插件，此插件也是依赖与jQuery的，所以一定要先导入jQuery，版本要求1.9.0以上，我这里偷个懒，直接使用CDN来导入（也建议用CDN来导入，因为线上环境CDN的加载速度比加载服务器文件要快。。）

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

之后就可以通过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;
    }
});

总结

jsTree这个插件还是很好用的，遇到的问题先写这么多，之后有的话再往里面补充，就这样。。。