jsTree 插件

html代码

<div id="jstree1"></div>

 

js代码：

<script src="__STATIC__/h5/js/jquery.min.js?v=2.1.4"></script>
<script src="https://static.jstree.com/3.3.5/assets/dist/jstree.min.js"></script>
<script>
$(document).ready(function () {
    $('#jstree1').jstree({
        'core' : {
            "animation" : 0,
            "check_callback" : true,
            'force_text' : true,
            "themes" : { "stripes" : true },
            'data' : {
                //"url" : "//www.jstree.com/fiddle/?lazy",
                "url":"{:url('img/imgFolder/jsTree')}",
                "dataType" : "json",
                "data" : function (node) {
                    return { "id" : node.id };

                }
            }
        },
        "plugins" : [ "contextmenu", "dnd", "search", "state", "types", "wholerow" ]
    });

});

function demo_create() {
    var ref = $('#jstree1').jstree(true), sel = ref.get_selected();
    if(!sel.length) { return false; }
    sel = sel[0];
    sel = ref.create_node(sel, {"type":"file"});
    if(sel) {
        ref.edit(sel);
    }
};
function demo_rename() {
    var ref = $('#jstree1').jstree(true),
    sel = ref.get_selected();
    if(!sel.length) { return false; }
    sel = sel[0];
    ref.edit(sel);

};
    function demo_delete(){
        var ref = $('#jstree1').jstree(true),
                sel = ref.get_selected();
        if(!sel.length) { return false; }
        ref.delete_node(sel);

        //$("#1").remove();
        console.log(sel)

        ref.set_text(1, '989898');

    }
</script>

 

其中data数据格式

$('#jstree1').jstree({ 'core' : {
    'data' : [
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }
    ]
} });