javascript - jsTree - 使用 AJAX/C#Web 方法动态填充树

Question

我有一个 div，我想用 jsTree 填充它:

我在要显示树的位置获得了“正在加载”图标，但是，似乎有一个 javascript 错误，即使没有抛出错误也是如此。

我按如下方式从 AJAX 请求加载我的文件夹结构。 Documents.aspx/GetFolders Web 方法返回一个包含 FolderId、ParentId 和文件夹名称的列表。我已经调试了 Web 方法，它正在将正确的结果传递给 jsTree“数据”函数。

$.ajax({
   type: "POST",
   url: 'Documents.aspx/GetFolders',
   contentType: "application/json; charset=utf-8",
   success: function (data) {
      data = data.d;

      $("#tree").jstree({
         "core": {
            "themes": {
               "responsive": true
            },
            "data": function () {
               var items = [];
               items.push({ 'id': "jstree_0", 'parent': "#", 'text': "Documents" });
               $(data).each(function () {
                  items.push({ 'id': "jstree_" + this.DocumentFolderId, 'parent': "jstree_" + this.ParentId, 'text': "" + this.Name });
               });
               return items;
            }
         },
         "types": {
            "default": {
               "icon": "fa fa-folder icon-lg"
            },
         },
         "plugins": ["contextmenu", "dnd", "state", "types"]
      });
   },
   error: function () {
      toastr.error('Error', 'Failed to load folders<span class=\"errorText\"><br/>There was a fatal error. Please contact support</span>');
   }
});

调试代码后，数据似乎被正确检索并按预期返回对象数组。

以上是否有任何问题(或者我应该查看其他地方)？或者是否有更好的方法来实现其预期目的？

Answer 1

我想我终于找到了答案! :)

"core": {
   "themes": {
      "responsive": true
   },
   "data": {
      type: "POST",
      url: "Documents.aspx/GetFolders",
      contentType: "application/json; charset=utf-8",
      success: function (data) {
         data.d;
         $(data).each(function () {
            return { "id": this.id };
         });
      }
   },
}

服务器端，需要返回数组格式的数据，即:

[{id = "node0", parent = "#", text = "Documents"},
{id = "node1", parent = "node0", text = "Public"},
{id = "node2", parent = "node0", text = "Restricted"}]