jsTree精简版使用范例

<!--树的代码-->
<div class="layui-btn-fluid btn-flex">
    <button type="button" onclick="create()" class="layui-btn layui-btn-sm" >新增</button>
    <button type="button" onclick="rename()" class="layui-btn layui-btn-primary layui-btn-sm">修改</button>
    <button type="button" onclick="del()" class="layui-btn layui-btn-danger layui-btn-sm">删除</button>
</div>
<div id="data" class="demo"></div>
<!-- jstree -->
<script src="{THEME_PATH}vakata/dist/jstree.min.js"></script>
<!--table data-->
<script>
    let tableIns;
    let left_org_id = 0;
    let ids = '';
    let supervisor = '';
    let selectednode = null;
    $('#data')
        .on('activate_node.jstree',function (nodes, event) {
            console.log('显示ID'+ event.node.original.ids); //获取原始数据的id
            ids = event.node.original.ids;
        })
        //单击右键
        .jstree({
            'core': {
                'data': JSON.parse('{$js_list}'),
                "themes" : {
                    "variant" : "large",//加大
                    "ellipsis" : true //文字多时省略
                },
                "check_callback" : true//设置为true,当用户修改数时,允许所有的交互和更好的控制(例如增删改)
            },
            "plugins" : ["themes",'json_data','contextmenu','dnd', 'types'],
            "contextmenu": {//重写contextmenu菜单
                items: function(o, cb){
                    //因为这里我们之后需要定义多个项,所以通过对象的方式返回
                    let actions={};
                    let idss = o.original.ids;
                    actions.idsf={
                        "separator_before"    : false,//Create这一项在分割线之前
                        "separator_after"    : true,//Create这一项在分割线之后
                        "_disabled"            : false, //false表示 create 这一项可以使用; true表示不能使用
                        "label"                : "id为"+idss,  //Create这一项的名称 可自定义
                        'icon'                 :'glyphicon glyphicon-home'
                    }
                    //添加一个"新增"右键菜单
                    actions.create={//这里的create其实阔以随意命名,关键是里面的 这里面的 action回调方法
                        "separator_before"    : false,//Create这一项在分割线之前
                        "separator_after"    : true,//Create这一项在分割线之后
                        "_disabled"            : false, //false表示 create 这一项可以使用; true表示不能使用
                        "label"                : "新增",  //Create这一项的名称 可自定义
                        "icon"				: "glyphicon glyphicon-plus",
                        "action"            : function (data) {  //点击Create这一项触发该方法,这理还是蛮有用的
                            create();
                        }
                    };
                    //添加一个"重命名"右键菜单
                    actions.rename={
                        "separator_before"    : false,
                        "separator_after"    : false,
                        "_disabled"            : false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
                        "label"                : "修改",
                        "icon"				: "glyphicon glyphicon-edit",
                        "action"            : function (data) {
                            rename();
                        }
                    }
                    //添加一个"删除"右键菜单
                    actions.delete= {
                        "separator_before"    : false,
                        "separator_after"    : false,
                        "_disabled"            : false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
                        "label"                : "删除",
                        "icon"				: "glyphicon glyphicon-remove",
                        "action": function (data) {
                            del();
                        }, function() {
                            layer.closeAll();
                        }
                    };
                    return actions;//返回右键菜单项
                }

            }
        })
        .on('open_node.jstree', function(event, data) {//展开节点
            $('.jstree-icon.jstree-themeicon.jstree-themeicon-custom').css('background-size','contain');//给节点重新渲染样式-处理背景图片的background属性的bug
        })
        .bind('ready.jstree', function(event, data) {//预备阶段
            let jsonNodes = $('#data').jstree(true).get_json('#', { flat: true});//树的实例化成功
            $.each(jsonNodes, function (i, val) {
                let node = $('#data').jstree().get_node(this);//获取当前对象的json数据
                var  nIcon = node.icon;//节点的背景图的数据
                $('#data').jstree(true).set_icon(node,nIcon);//设置图标
            })
            $('.jstree-icon.jstree-themeicon.jstree-themeicon-custom').css('background-size','contain');//处理背景图片的background属性的bug
        });
    ;
    function create(){
        var form = layui.form;
        var ref = $('#data').jstree(true);//判断树新增是否成功
        $('#menuBox .layui-input').val('');
        let val = _getCurrNode();
        if (val) { //选中节点 有顶级菜单
            var ref = $('#data').jstree(true);
            var sltText = ref.get_text(val);//获取节点文本：
            var ht_str = '<label class="layui-form-label">上级菜单</label><div class="layui-input-block">';
            ht_str += '<div class="layui-form-label">'+sltText+'</div>';
            ht_str += '</div></div>';
            $("#top_name").html(ht_str);
            $("#edit_pid").val(ref.get_selected(true)[0].original.ids);
        } else { //新增顶级 无顶级菜单
            $("#edit_pid").val('0');
        }
    }
    function rename(){
        var form = layui.form;
        let val = _getCurrNode();
        
        //获取节点后进行的操作
        //something......
    }
    /**
     *	获取当前所选中的结点
     */
    function _getCurrNode(){
        var ref = $('#data').jstree(true),
            sel = ref.get_selected();
        if(!sel.length) {
            return false;
        }
        sel = sel[0];
        return sel;
    }
    /*树结束*/

</script>
<!--内容区 end-->

可以把代码拷贝下来自行研究