jstree 学习

最近的项目用到了jstree，因为对官方文档理解不充分，所以很多功能都是在网站上搜索再进行使用的。（我只是大自然的搬运工）

1. 对每一级的节点，右键后出现不同的结果。

在jstree中右键是由 contextmenu 实现的，所以我们需要自定义它。在这之前要在 plugins 中添加它。"plugins": ["contextmenu"]。

然后定义个函数

    function contextItem(node) {
        let items = {
            'item1': {
                "增加地点": {
                    "label": "增加地点",
                    "action": function (data) {
                        let inst = jQuery.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                        inst.create_node(obj, {}, "last", function (new_node) {
                                inst.edit(new_node);

                        });
                    }
                }
            },
            'item2': {
                "删除地点": {
                    "label": "删除地点",
                    "action": function (data) {
                        let inst = jQuery.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                        if (confirm("确定要删除此菜单？删除后不可恢复。")) {
                            inst.delete_node(obj);
                        }
                    }
                },
                "修改地点": {
                    "label": "修改地点",
                    "action": function (data) {
                        let inst = jQuery.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                        inst.edit(obj);
                    }
                }
            },
            'item3': {
                "create": null,
                "rename": null,
                "remove": null,
                "ccp": null
            }
        };
        if (node.type === '1_level') {
            items = items.item1;
        } else if (node.type === '2_level') {
            items = items.item2;
        } else {
            items = items.item1;
        }
        // console.log(node.parent.length);
        return items;
    }

最后只要把定义好的函数引用在contextmenu中就好了。

 "contextmenu": {
                "items": contextItem,
            },

2.实现每个节点懒加载（点到相应的节点才会发送ajax到后台，获取相应数据）。如下图

在jstree中

core:{
    data:DataLoader
    }

定义了DataLoader函数。

function DataLoader(node, render) {
    if (node.id === '#') { // 对于根节点来说，加载一级的地区目录
        render(FakeAjaxLoadLevel1())
    } else if (node.data) {  //判断依据可以用户自定义
        switch (node.data.level) {
            case 1:
             render(FakeAjaxLoadLevel2(node.text)); // 对于一级的地区目录来说，加载相应的市级
                break;
            case 2:
                render(FakeAjaxLoadLevel3(node.text)); // 对于二级的市级来说，加载相应的辖区
                break;
        }
    }
}

每一节点的函数返回jstree中所需的属性，以第一级为例

function FakeAjaxLoadLevel1() {
    return [
        {
            text: '华东地区', id: 1, children: true,
            data: {
                level: 1
            }
        },
        {
            text: '华中地区', id: 2, children: true,
            data: {
                level: 1
            }
        }
    ];
}

3.每一层节点使用不同的图标

types标签

 "types": {
            "default": {
                    "icon": "fa fa-globe"
                },
             "2_level": {
                    "icon": "fa fa-home"
                },
            "3_level": {
                    "icon": "fa fa-flag"
                },
            }

只是把自己所遇到的jstree问题进行总结，持续更新ing.