您现在的位置是:网站首页>>前端技术>>html+css+js

使用jstree插件实现树形结构

发布时间:2020-05-19 18:04:30作者:wangjian浏览量:273点赞量:0

    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>

    如上就可以实现树形结构,如下:

    image.png

    上面已经简单的了解了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];

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

    image.png

0 +1