jsTree - 동적으로 내가이 jsTree 채우기 싶습니다 사업부가 AJAX/C# 웹 방법

Question

를 사용하여 채우기 트리 : 나는 나무가 있지만, 표시하기위한 것입니다은 "로드"아이콘을 얻을

을, 자바 스크립트 오류가있는 것처럼 보일 것입니다.

다음과 같이 AJAX 요청에서 내 폴더 구조를로드합니다. Documents.aspx/GetFolders 웹 메서드는 FolderId, ParentId & 폴더 이름이 포함 된 목록을 반환합니다. 나는 웹 메소드를 디버깅했으며 올바른 결과를 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>'); 
    } 
}); 

코드를 디버깅 한 후 데이터가 올바르게 검색되고 의도 한대로 개체 배열을 반환하고있는 것으로 보입니다.

위와 관련하여 문제가 있습니까 (아니면 내가보고 있어야하는 다른 곳입니까)? 아니면 의도 된 목적을 달성하기위한 더 나은 방법이 있습니까?

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