외부 JSON 파일에서 jsTree 채우기

jQuery.jsTree 라이브러리를 실험 해보고 도움이 필요합니다. 외부 .json 파일에서 json_data을 읽는 방법에 대해 조언 해 줄 수 있습니까?외부 JSON 파일에서 jsTree 채우기

$("#treeDemo").jstree({ 
    "plugins" : [ "themes", "json_data", "ui", "types" ], 

    //"json_data": { 
    // "ajax" : { 
    //  "url" : "Series.json" 
    // } 
    //}, 

    "json_data" : { 
     "data" : [{"data":"Series 1","children":[{"data":"Season 1","children":[{"data":"Episode 1.avi","attr":{"rel":"file"}},{"data":"Episode 2.avi","attr":{"rel":"file"}},{"data":"Episode 3.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}},{"data":"Season 2","children":[{"data":"Episode 4.avi","attr":{"rel":"file"}},{"data":"Episode 5.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}}],"attr":{"rel":"folder"}},{"data":"Series 2","children":[{"data":"Season 1","children":[{"data":"Episode 1.avi","attr":{"rel":"file"}},{"data":"Episode 2.avi","attr":{"rel":"file"}},{"data":"Episode 3.avi","attr":{"rel":"file"}},{"data":"Episode 4.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}}],"attr":{"rel":"folder"}},{"data":"Series 3","children":[{"data":"Episode 1.avi","attr":{"rel":"file"}},{"data":"Episode 2.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}},{"data":"Series 1","children":[{"data":"Episode 1.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}},{"data":"Series 2","children":[{"data":"Episode 1.avi","attr":{"rel":"file"}},{"data":"Episode 2.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}}] 
    }, 

    "types" : { 
     "max_depth" : -2, 
     "max_children" : -2, 
     "valid_children" : ["drive"], 
     "types" : { 
      "folder" : { 
       "valid_children" : ["default", "folder"], 
       "icon" : { 
        "image" : "images/folder.png" 
       } 
      }, 
      "file" : { 
       "valid_children" : "none", 
       "icon" : { 
        "image" : "images/file.png" 
       } 
      } 
     } 
    }, 

    "themes" : { 
     "theme" : "default", 
     "url" : "themes/default/style.css", 
     "dots" : true, 
     "icons" : true 
    }, 

    "search" : { 
     "case_insensitive" : true, 
     "ajax" : { 
      "url" : "/static/v.1.0pre/_docs/_search_result.json" 
     } 
    } 

})

따라서 위 코드는 jsTree와 같이 작동해야합니다. 주석이 달린 json_data 플러그인은 지정된 'Series.json'파일에서 똑같은 JSON 데이터를 읽는다고 가정하지만 코드를 실행하면로드하는 gif 만 표시됩니다.

도와주세요. 사전에

감사합니다, 그랜트는

출처

2013-07-23 ThatGuyGrant

이 공통의 문제처럼 보인다. 어쨌든 ajax 호출을 호출하여 아래 표시된 것처럼 필요한 json 파일을 가져옵니다.

"json_data":{ 
    "ajax" : { 
     "url" : "info.json" // the URL to fetch the data. Use relative url if required 
    } 
}

이것은 확실히 작동 할 것입니다!

건배!

출처

2013-08-03 05:00:21 Teja

감사합니다. Teja, 코드를 업데이트했으며 이제는 단순히 로딩 심볼을 표시합니다. 'Info.json'파일은 트리를 표시하는 'index.html'파일에 상대적입니다. – ThatGuyGrant

@ 그랜트 좋아, 그럼 json은 jstree에 필요한 형식이 아닌 것 같아. 중괄호 누락 또는 누락 된 쉼표 또는 불필요한 쉼표가 있는지 확인하십시오. jstree 데모를 열고 json 데이터 형식을 확인하십시오. – Teja

감사합니다. JSON 데이터를 검토 한 결과 모든 것이 순서에 맞았습니다. 더 많은 정보가 있으므로 질문을 업데이트했습니다. 제발 조언. Thx – ThatGuyGrant

위 예제를 시도해 본 결과 나에게 도움이되지 않습니다. github examples code의 다음 내용은 정상적으로 작동합니다.

$('#ajax').jstree({ 
    'core' : { 
     'data' : { 
      "url" : "./root.json", 
      "dataType" : "json" // needed only if you do not supply JSON headers 
     } 
    } 
});

출처

2016-08-30 19:16:02 FerranB

외부 JSON 파일에서 jsTree 채우기

답변

관련 문제