代码改变世界

jstree插件的使用(初步)

2018-10-23 10:32  小花儿鹿  阅读(762)  评论(0)  编辑  收藏  举报

jstree官网地址：https://www.jstree.com/

入门实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- jstree css样式 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>
    <!-- 设置容器元素 -->
    <div id="jstree">
        <!-- 在本例中，树是从内联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>
    <!-- jquery.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <!-- jstree js核心文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script type="text/javascript">
        $(function(){ 
            //当DOM准备好时创建一个jstree实例
            $('#jstree').jstree(); 
        });
    </script>
</body>
</html>

 效果图