使用jstree插件实现树形结构

jstree的github地址：https://github.com/vakata/jstree

jstree的CDNJS地址的相关链接：

(1)：js

https://cdnjs.cloudflare.com/...

(2)：css

https://cdnjs.cloudflare.com/...

jstree的简单使用

1：引入css

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

2：引入js

<!--引入jquery-->  
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  
<!--引入jstree-->  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>  

3：html内容：

<div id="jstree">  
    <ul>  
        <li>父节点1  
            <ul>  
                <li>子节点1</li>  
                <li>子节点2</li>  
            </ul>  
        </li>  
        <li>父节点2  
            <ul>  
                <li>子节点3</li>  
                <li>子节点4</li>  
            </ul>  
        </li>  
    </ul>  
</div>  

4：使用jstree

<script>  
    $(function () {  
        $('#jstree').jstree({});  
    });  
</script> 

如上就可以实现树形结构，如下：

上面已经简单的了解了jstree的使用，当我们的树形结构数据来源接口时，实现如下：

1：html内容：

<div id="jstree">  
</div>

2：使用jstree

<script>  
    $('#jstree').jstree({  
        "core" : {  
            "check_callback" : true,  
            "data": function (obj, cb) {  
                $.getJSON("/jstree/tree.php", function (json) {  
                    if (json.type == 'success') {  
                        cb.call(this, json.data);  
                    }  
                });  
            }  
        },  
    });  
</script>  

3:后端(php)：

$data = [  
    [  
        'id' => 0,  
        'parent' => '#',  
        'text' => '父级',  
        'state' => ['opened' => 'true'],  
        'a_attr' => [  
            'title' => '<i class="jstree-themeicon"></i> 父级',  
            'class' => 'data-table-load',  
            'data-url' =>'/user/index',  
        ]  
    ],  
    [  
        'id' => 1,  
        'parent' => 0,  
        'text' => '子级',  
        'state' => ['opened' => 'true'],  
        'a_attr' => [  
            'title' => '子级',  
            'class' => 'data-table-load',  
            'data-url' => ''/user/index?id=1',  
        ]  
    ]  
];  
return ['type' => 'success', 'data' => $data];

根据如上就可以实现从接口获取数据实现树形结构