bootstrap-treeview踩坑记

 错误例子：

   <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap-treeview.min.css" />
    <script type="text/javascript" src="../skeleton/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../plugins/bootstrap/js/bootstrap-treeview.min.js" ></script>

不起作用： 

换成bootstrap.min.css:

  <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap-treeview.min.css" />
    <script type="text/javascript" src="../skeleton/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../plugins/bootstrap/js/bootstrap-treeview.min.js" ></script>

成功的效果： 

html： 

<div id="tree"></div>

script： 

<script type="text/javascript">
    $(function() {
        $('#tree').treeview({
            data: getTree()//节点数据
        });
    });

    function getTree() {
        var tree = [
            {
                text:"Parent 1",
                nodes: [
                    {
                        text:"Child 1",
                        nodes: [
                            {
                                text:"Grandchild 1"
                            },
                            {
                                text:"Grandchild 2"
                            }
                        ]
                    },
                    {
                        text:"Child 2"
                    }
                ]
            },
            {
                text:"Parent 2"
            },
            {
                text:"Parent 3"
            },
            {
                text:"Parent 4"
            },
            {
                text:"Parent 5"
            }
        ];

        return tree;
    }
</script>

 以上就可以完成一个简单的boostrap-treeview  Hello World