个人中心
gpt4 book ai didi

javascript - Bootstrap TreeView 不起作用？

转载 作者：行者123 更新时间：2023-12-01 03:07:01 25 4
gpt4 key购买 nike

我正在尝试使用 Bootstrap TreeView 。我按照文档编写了代码，但是当我从浏览器打开它时没有显示任何内容。怎么了？

我从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>

最佳答案

你必须将你的treeview init移到bootstrap-treeview.min.js之后，并将其保留在:

$(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/

关于javascript - Bootstrap TreeView 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46107825/

25 4 0
文章推荐： javascript - 将参数传递到主干 .bind() 函数
文章推荐： Javascript 设置超时以引导警报
文章推荐： jquery - 将 XPath 选择器转换为 jQuery
文章推荐： javascript - Django - 将变量传递给同一脚本标签内的javascript文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com