代码之家 › 专栏 › 技术社区 › Senio Vak

用json创建bootstrap treeview

twitter-bootstrap javascript

Senio Vak · 技术社区 · 7 年前

你好,我有这样的json,我想创建bootstrap treeview,但我不知道怎么做。

[
  {
    "text": "n1",
    "nodes": [
      {
        "text": "next",
        "nodes": []
      },
      {
        "text": "hello",
        "nodes": [
          {
            "text": "test",
            "nodes": [
              {
                "text": "wow",
                "nodes": [
                  {
                    "text": "hhh",
                    "nodes": []
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "text": "fajno",
        "nodes": [
          {
            "text": "abb",
            "nodes": []
          }
        ]
      }
    ]
  }
]

这里有一个json脚本:

var value = document.getElementById("value").value;

然后尝试创建TreeView:

$('#treeview2').treeview({
            data: value
        });

在HTML中:

 <h2>Collapsed</h2>
     <div id="treeview2" class=""></div>

除h2文本外,未显示任何内容。这个json应该如何创建引导树视图?

1 回复 | 直到 7 年前

fnostro 7 年前

您需要确保按照适当的顺序添加必要的链接和脚本标记

如果没有代码和样式,数据就毫无意义

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>

运行此片段以查看您的treeview

$(function(){
var tvData = [
  {
    "text": "n1",
    "nodes": [
      {
        "text": "next",
        "nodes": []
      },
      {
        "text": "hello",
        "nodes": [
          {
            "text": "test",
            "nodes": [
              {
                "text": "wow",
                "nodes": [
                  {
                    "text": "hhh",
                    "nodes": []
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "text": "fajno",
        "nodes": [
          {
            "text": "abb",
            "nodes": []
          }
        ]
      }
    ]
  }
];

$('#treeview1').treeview({data:tvData});

});

#treeview1{width:200px;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>


<div id="treeview1" class="treeview"></div>