javascript - Bootstrap TreeView 不起作用？-6ren

javascript - Bootstrap TreeView 不起作用？

转载作者：行者123 更新时间：2023-12-01 03:07:01

25

4

我正在尝试使用 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

kendo-ui - Kendo UI TreeView - 如何将内容从一个 Treeview 复制到另一个 Treeview ？
我在一页上有两个 Kendo UI TreeViews。例如: var data1 = new kendo.data.HierarchicalDataSource({ data: [
treeview - Vuetify treeview - 选择父级而不选择子级
使用 Vuetify 的 TreeView 组件时，我试图能够选择父级没有让它也选择所有的后代( child )。我尝试了可选、可激活等的各种组合……但似乎找不到合适的组合。任何人都有实现这一预
treeview - JavaFX - TreeView 在删除所选项目时的奇怪行为
在我的应用程序中，左侧有一个 TreeView，我根据 TreeView 中的选择更新右侧的 Pane 。一个非常直接的场景。当选择为空时，我会在 Pane 中显示一条类似“请进行选择”的消息，即我还
treeview - Doxygen:如何在 TreeView 中隐藏某些页面
我有一个我自己无法解决的问题。请帮忙。我有(有条件地): /** @mainpage A @subpage B */ /** @page B @subpage C */ /** @page C */
treeview - JDK 8 TreeView 披露三角形垂直对齐不正确
我制作了一个高度为 40 px 的自定义树单元。这里的问题披露三角形没有垂直居中对齐。这里是树单元的代码: public static class TestObjectCell extends A
treeview - 如何使用 TornadoFX TreeView 显示数据
我正在学习如何使用 kotlin 并已开始使用tornadoFX。我正在阅读该指南以尝试学习它，但是我无法弄清楚“具有不同类型的 TreeView”中的含义。似乎是说我应该使用星形投影，据我所知，当您
treeview - Javafx 2 TreeView 过滤
如何在 JavaFX 2 TreeView 中过滤节点？我有一个 TextField，我想根据 TextField 的内容过滤所有节点(例如节点标签)。谢谢。最佳答案这是我编写的可重用的可过滤
treeview - Asp.Net TreeView 具有扩展深度的选定节点
我正在通过查询 sharepoint 用户配置文件构建一个 asp.net TreeView 。要选择的帐户名和根节点帐户名正在从查询字符串中读取。我还需要为树配置可配置的扩展深度。如果节点属于第
treeview - TreeView 中的 TreeItem 选择宽度
我使用的是 JavaFX 8，目前正在进行一些 GUI 开发。我的 TreeView 有点问题，我需要你的帮助。您知道在 TreeView 中是否可以只选择标签而不是 TreeCell 的整个宽度吗
c++ - TreeView 中的分层数据和 TreeView 更新技术
我有很多(分层的)数据显示在 TreeView 中(可能是大约 20K 项或更多，包括子项)。我的数据的特殊问题是 TreeView 中显示的每个对象都可以存在于许多 TreeView 项目中。我的意
treeview - Vala 中的 Gtk.TreeView 可编辑列
有没有什么简单的方法可以让 Gtk.Treeview 在编辑时更新它的列？我基于 Gtk.ListStore 模型构建了 Treeview。我这样初始化单元格: Gtk.CellRendererTe
treeview - 在 TreeView 中更新 JavaFX 节点
我开始使用 javafx。我有一个问题。我有一个树 View ，其中节点通过外部命令改变了他的位置，但它只是看不到树。我必须最小化父级并重新展开才能看到效果。 Altem 对该树 View 的任何建议
kendo-treeview - 取消选择 Kendo Treeview 节点
如何在 Kendo Treeview 中取消选择节点？我尝试从节点中删除类“k-state-selected”。它工作正常，但有没有直接的方法可以做到这一点。最佳答案现在有一种更好的方法可以取消
kendo-treeview - 仅在使用 Kendo Treeview 的子节点上显示复选框
我有以下情况，我有一个带有许多嵌套子节点的父节点。只有父节点应该有一个复选框，我发现的唯一例子是只有子节点有一个复选框。这可以使用 Kendo 模板吗？ http://dojo.telerik.com
kendo-treeview - 带有模板选项的 Angular-Kendo TreeView
我正在尝试向 TreeView 数据项添加一些内联图标，但是 k-template 指令似乎没有呈现任何内容。我基于在线文档在 http://demos.telerik.com/k
javascript - Kendo Treeview - 如何在另一个 Treeview 中显示具有所有父节点的选定节点
我有一个带有复选框和父节点和子节点的 Kendo Treeview 。我需要将选中节点的完整层次结构复制到另一个 Treeview 中。 ex - 根节点、父节点和选中的子节点。下面是我的代码，但
treeview - 删除 JavaFX TreeView 滚动 Pane
我需要在较大的滚动 Pane 中使用 JavaFX 2.2 TreeView 控件，该滚动 Pane 具有多个不属于 Treeview 的其他元素。问题是 TreeView 有它自己的内置滚动 Pan
treeview - 展开 Windows 窗体 TreeView 节点而不选择它
当我通过单击 TreeView 节点右侧的加号来展开该节点时，该节点将被选中。我怎样才能避免这种情况？我希望能够在不更改所选节点的情况下展开节点(例如在 RegEdit.exe 中)，并且仅在单击节点
vba - 从 Treeview 对象变量设置 Treeview 控件？
我正在尝试设置一个 Treeview 对象，设置节点，然后更新控件以使值具有适当的格式。现在我有以下代码，当我设置一个控件时，它可以工作，但不是来自变量的控件。如何从变量设置本地控件？ Private
c# - 如何将一个 TreeView 实例的节点添加到同一 TreeView 的另一个实例
如何将节点填充到作为另一个 treeview1 实例的 newtreeview1 中？添加到“newtreeview1”的节点应该在 treeview1 的第一个实例中可用？例如；如果 treevi

首页

博学

6Ren·AI

商城

javascript - Bootstrap TreeView 不起作用？