使用jstree插件實現樹形結構

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

jstree的CDNJS地址的相關鏈接：

(1)：js

https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js

(2)：css

https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css

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];

根據如上就可以實現從接口獲取數據實現樹形結構