jsTree - 使用AJAX / C＃Web方法动态填充树 [英] jsTree - Populate Tree Dynamically using AJAX/C#Web Method

问题描述

我有一个div，我想填写一个jsTree：

I have a div which I would like to fill with a jsTree:

我得到了加载图标，其中树要显示，但是，那里似乎是一个javascript错误，即使没有抛出。

I get the "Loading" icon where the tree is meant to display, however, there would seem to be a javascript error, even though one is not thrown.

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

I load my folder structure from an AJAX Request as follows. The Documents.aspx/GetFolders Web Method returns a List containing FolderId, ParentId & Folder Name. I have debugged the web method and it is passing the correct results to the jsTree "data" function.

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

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

After debugging the code, it seems the data is being retrieved correctly and is returning the object array as intended.

以上是否有任何问题（或者我应该在其他地方寻找）？或者有更好的方法来实现其预期目的吗？

Is there are any problem with the above (or is there somewhere else I should be looking)? Or is there a better method of achieving its intended purpose?

推荐答案

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

I think I have finally found the answer! :)

"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 };
         });
      }
   },
}

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

Server side, you need to return the data in the array format required, i.e:

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

这篇关于jsTree - 使用AJAX / C＃Web方法动态填充树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！