1

我正在使用引导树视图插件（https://github.com/jonmiles/bootstrap-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 浏览器）中，我在控制台中看到“$('#lstCollections').treeview({ data : 集合树 });"

如果我替换$('#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 is not function() 。

4

1 回答 1

0

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

let invalid = '{ "bank": "CityBank", "sum": "500" }, { "bank": "WPBank", "sum": "700" }';
let valid = JSON.parse("[" + invalid + "]");

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

这一切都是为了向 JSON 对象添加方括号符号！

于 2020-09-15T10:25:59.877 回答