jquery树形插件 jstree.js-BFW插件库

jquery树形插件 jstree.js

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery-3.4.1.min&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <link rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/themes/default/style.min.css" />
    <script type="text/javascript">
        bready(function() {
            use(["jstree.min"], function() {
                $('#jstree').jstree();
                // 7 bind to events triggered on the tree
                $('#jstree').on("changed.jstree", function (e, data) {
                    console.log(data.selected);
                });
                // 8 interact with the tree - either way is OK
                $('button').on('click', function () {
                    $('#jstree').jstree(true).select_node('child_node_1');
                    $('#jstree').jstree('select_node', 'child_node_1');
                    $.jstree.reference('#jstree').select_node('child_node_1');
                });
            });
        });
    </script>
    <style>
        html {
            margin: 0;
            padding: 0;
            font-size: 62.5%;
        }
        body {
            max-width: 800px;
            min-width: 300px;
            margin: 0 auto;
            padding: 20px 10px;
            font-size: 14px;
            font-size: 1.4em;
        }
        h1 {
            font-size: 1.8em;
        }
        .demo {
            overflow: auto;
            border: 1px solid silver;
            min-height: 100px;
        }
    </style>
</head>
<body>
    <div id="jstree">
        <!-- in this example the tree is populated from inline HTML -->
        <ul>
            <li>Root node 1
                <ul>
                    <li id="child_node_1">Child node 1</li>
                    <li>Child node 2</li>
                </ul>
            </li>
            <li>Root node 2</li>
        </ul>
    </div>
    <button>demo button</button>

</body>
</html>

官网 https://www.jstree.com/