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

Question

我有一个div,我想用jsTree填充:

我得到了要显示树的"正在加载"图标,但是,即使没有抛出,也会出现javascript错误.

我从AJAX请求加载我的文件夹结构,如下所示.Documents.aspx/GetFolders Web方法返回包含FolderId,ParentId和Folder Name的List.我调试了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"}]