首页 > 解决方案 > 引导树视图:树未显示

问题描述

我是 Bootstrap-treeview (bootstrap-treeview.js v1.0.2) 的新手。我正在尝试显示文档中给出的树,但它没有显示出来。

我检查了两个文件,没有发现错误。

html:

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="{% static 'bootstrap-treeview.min.css' %}">

        <title>test</title>
    </head>
    <body>
        <div class="container">
            <div id="tree"></div>
        </div>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-2.1.3.min.js" integrity="sha256-ivk71nXhz9nsyFDoYoGf2sbjrR9ddh+XDkCcfZxjvcM=" crossorigin="anonymous"></script>
        <script src="{% static 'bootstrap-treeview.min.js' %}"></script>
        <script src="{% static 'functions.js' %}"></script>
    </body>
</html>

函数.js

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

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

标签: twitter-bootstrap-3bootstrap-treeview

解决方案


您正在创建数组tree,但datagetTree函数中返回


推荐阅读