Question

我正在尝试使用bootstrap Tree View。我根据文档编写了代码，但是当我从浏览器打开它时没有任何显示。有什么问题？

我从zip源代码中提取bootstrap.min.css和bootstrap.min.js并将其放入treeview。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Treeview -->
<script src="/treeview/bootstrap-treeview.min.css"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
hello
<div class="container">
    <div id="tree"></div>
</div>
</body>
<script>
    var mytree = [
        {
            text: "Parent 1",
            nodes: [
                {
                    text: "Child 1",
                    nodes: [
                        {
                            text: "Grandchild 1"
                        },
                        {
                            text: "Grandchild 2"
                        }
                    ]
                },
                {
                    text: "Child 2"
                }
            ]
        },
        {
            text: "Parent 2"
        }
    ];

    $('#tree').treeview({data: mytree});
</script>
<!-- Font -->
<script src="https://use.fontawesome.com/c1d4b38cd6.js"></script>

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Treeview -->
<script src="/treeview/bootstrap-treeview.min.js"></script>

Answer 1

你必须在bootstrap-treeview.min.js包含之后移动你的treeview init，并将其保存在：

$(function(){
    // This code runs after the document ready.
});

所以它应该是：

.
.
.
<!-- Treeview -->
<script src="/treeview/bootstrap-treeview.min.js"></script>
<script type="text/javascript">
    $(function(){
        var mytree = [
            {
                text: "Parent 1",
                nodes: [
                    {
                        text: "Child 1",
                        nodes: [
                            {
                                text: "Grandchild 1"
                            },
                            {
                                text: "Grandchild 2"
                            }
                        ]
                    },
                    {
                        text: "Child 2"
                    }
                ]
            },
            {
                text: "Parent 2"
            }
        ];

        $('#tree').treeview({data: mytree});
    });
</script>

这是适用的版本：https://jsfiddle.net/jc788d2L/

Answer 2

将这些链接放在脑海中：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/treeview/bootstrap-treeview.min.css"></script>

然后通过以下方式初始化树视图：

$(function(){ 
  $('#tree').treeview({data: mytree});     
})

我刚给你写了一个例子 https://jsbin.com/murerucodo/edit?html,output

你可以看一下：）

bootstrap树视图不起作用？

2 个答案: