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

jsTree - Populate Tree Dynamically using AJAX/C#Web Method

本文关键字：动态 填充 方法 C#Web 使用 AJAX jsTree-      更新时间：2023-09-26

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

我得到了树要显示的"Loading"图标，然而，似乎有一个javascript错误，即使没有抛出。

我从AJAX请求加载我的文件夹结构，如下所示。Documents.aspx/GetFolders Web方法返回一个包含FolderId、ParentId&文件夹名称。我已经调试了web方法，它正在将正确的结果传递给jsTree"data"函数。

$.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>');
   }
});

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

上面有什么问题吗（或者我应该找其他地方）？还是有更好的方法来实现其预期目的？

我想我终于找到了答案！：）

"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"}]

为了防止有人出现"加载…"问题，这种格式在返回数据时为我修复了这个问题。

[{"id":"node0", "parent":"#", "text":"Documents"},
{"id":"node1", "parent":"node0", "text":"Public"},
{"id":"node2", "parent":"node0", "text":"Public"}]
相关文章：