Question

我正在使用bootstrap treeview插件（https://github.com/jonmiles/bootstrap-treeview）。我不确定这是否是treeview插件的问题或我实现代码的方式。我正在尝试使用来自ajax回调的数据加载树视图。这是我正在使用的代码示例：

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 101 Template</title>
  <!-- Required Javascript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="~/Content/BootStrap/bootstrap-treeview.js"></script>
</head>
<body>
  <div class="clear-fix"> </div>
  <div class="row">
    <div class="col-sm-2"><div id="lstCollections">This will display my list of all collections</div></div>
  </div>
</body>
</html>

<script type="text/javascript">
  function getTree(handleData) {
    $.ajax({
      type: "GET",
      url: '@Url.Action("Get","DatabaseSchema")',   
      dataType: 'json',
      success: function (response) {
        handleData(response);
      }
    });
  }

  $(document).ready(function () {
    getTree(function (output) {
    var collectionTree = [];

      output.forEach(function (a) {
        collectionTree.push({ text: a });
      });

      //var tree2 = [{ text: "Buyer" }, {text: "text1" }, { text: "text2" }, { text: "text3" }];


      $('#lstCollections').treeview({ data: collectionTree });
    });
  })

</script>

当我运行代码时，我在树视图中看不到任何数据。在我的开发人员工具（对于chrome浏览器）中，在控制台中我看到“未捕获的TypeError：$（...）。treeview不是函数（...）”错误就行“$（'＃lstCollections'）。treeview（{data ：collectionTree}）;“

如果我用$('#lstCollections').treeview({ data: collectionTree });替换$('#lstCollections').treeview({ data: tree2});（其中tree2是我在document.ready函数中声明的变量，我仍然会得到相同的错误。

有趣的是，如果我使用以下调用在ajax回调函数之外填充树视图：

function nonAjax() {
    var tree = [{ text: "Buyer" }, { text: "text1" }, { text: "text2" }, { text: "text3" }];
    return tree;
}
$('#lstCollections').treeview({` data: nonAjax() });

一切正常!! 当调用是在ajax回调函数中时，我不确定为什么我是gettig treeview不是function（）。

Answer 1

应该传递给树视图的正确格式不是您从Ajax调用返回的格式，而是应该像下面的示例一样解析json对象：

Startup.cs

现在，您可以毫无问题地将有效变量传递给treeView。

所有关于在JSON对象中添加方括号表示法！

从使用Ajax调用检索的数据填充bootstrap树视图时出错

1 个答案: