2011-11-11 4 views
1

일부 데이터가 JSON 형식으로 저장되어 있습니다. 나는 MongoVUE이 mondodb 문서를 제시 비슷한 방식으로 동적 트리 구조로 브라우저에 표시 할 수 있도록하고 싶습니다 : 나는 jsTree라는 아주 좋은 jQuery 플러그인을 발견 ScreenshotHTML에서 일반 JSON 데이터의 트리 표현을 만드는 방법은 무엇입니까?

. 안타깝게도 JSON 문서를 처리하려면 매우 구체적인 자세한 정보 구조가 필요합니다 (내 의견으로는 중복 구조) : link. 그것을 사용하는 것은 json 문서의 중요한 수정을 의미합니다. 차라리 수동으로 데이터를 수정하지 않고도 자동으로 트리를 구축 할 수있는 도구를 찾고 있습니다. 그렇지만 필요할 경우보기에 수정 사항을 적용 할 수도 있습니다.

json.bloople.net의 툴은 테이블을 사용하여 비슷한 것을 만들지 만 여러 레벨의 중첩 된 문서가 있기 때문에 출력이 매우 비대 해 보입니다. 또한, 구조는 동적으로 접을 수 없습니다.

Java/Groovy에서 JSON 데이터의 사전 처리 또는 순수한 JavaScript 기반 솔루션을 필요로하는 작업 (자동화 된!)을 포함하여 작업을 수행하는 데 적합한 도구에 관한 힌트를 얻으실 수 있습니다.

+2

만약 내가 당신이라면 1) json 객체를 jstree 노드로 변환하는 자바 스크립트 메소드를 작성하거나 2) json을 그대로두고 중첩 된 div 태그를 생성하여 자신의 솔루션을 작성하고 jquery 효과, 나는 그것이 너무 어려울 것이라고 생각하지 않으며 실제로 재미있을 수도 있습니다 ;-) 만약 당신이 json을 제공한다면 아마도 사람들이 당신을 시작할 수 있도록 도울 수 있습니다. – Upgradingdave

답변

0

이것은 html로 JSON 구조와 같은 트리를 출력하는 방법의 간단한 예일뿐입니다. http://jsfiddle.net/K2ZQQ/1/ (공백에 대한 브라우저 지원은 here 참조) 대체물은 JSON.stringify 각 부재의 키 값 전달 함수를 호출 함수 인 경우

http://msdn.microsoft.com/en-us/library/ie/cc836459(v=vs.94).aspx 가입일 : JSON.stringify 두 번째 파라미터는 replacer 함수임을 유의. 반환 값은 원래 값인 대신 사용됩니다. 함수가 undefined를 반환하면 멤버는 제외됩니다. 루트 객체의 키는 빈 문자열입니다 (""). 당신이 당신의 JSON 트리의 dislpay에 더 수정을 추가해야하는 경우

그래서 replacer 기능이 도움이 될 수 있습니다.

관련 문제