Ivan Bozhanov씨가 최근에 jQuery기반 트리 컴포넌트를 작성하셨습니다. 아시다시피 트리 컴포넌트는 꽤 많습니다. YUI!에도 멋지고 안정적인 트리 컨트롤이 있고, Dojo에도 있고, 공식적인 jQuery UI에는 없지만 트리 플러그인이 몇 개 있습니다. 예상하신대로, Ext JS에도 멋진 트리 컴포넌트가 있습니다.

jsTree의 몇 가지 부분을 살펴보겠습니다. 우선, 많은 트리에서 부족했던 몇 가지 기본 기능이 있습니다:
jstree는 사용자가 노드를 생성, 이름 변경, 재정렬, 이동, 삭제할 수 있습니다.
또한 다른 잘된 대부분의 수정가능한 트리 컴포넌트와 같이 풍부한 이벤트 API를 가지고 있습니다. 하지만 조금 이벤트 타입이 조금 더 세분화 되어있습니다:
여러분은 대부분의 액션에 콜백을 붙일 수 있습니다:
- onbeforechange
- onchange
- onrename
- onmove
- oncreate
- ondelete
- onopen
- onclose
그리고 노드의 "type"에 기반해 사용자가 할 수 있는 것과 그렇지 않은 것을 정하는 규칙을 줄 수도 있습니다. 즉, 개발자가 정의할 수 있는 노드의 유형에 기반해 노드의 이동, 선택, 삭제, 포커싱의 규칙을 정할 수 있습니다.

지역화에 대한 기능이 이미 내장되어있기 때문에, 트리를 생성할 때 지원할 서로 다른 언어에 대해 지정해줄 수 있습니다:
[code:js]
tree1.init($("#nested"), {
  data : "nested.xml",
  xsl : "nested.xsl",
  languages :  [ "en", "bg" ],
  // other stuff omitted
});
그리고는 XML 파일에 다음과 같이 표기하면 됩니다.
[code:xml]
<name lang="bg" icon="images/f.png">Начало</name>
<name lang="en" icon="images/f.png">Home</name>
XML 뿐만 아니라, JSON이나 인라인 HTML도 지원하며 XML 데이터 소스에 대한 XSL 변환까지 내장 기능으로 지원하고 있습니다.

안타깝게도, jsTree는 시각적인 표현면에서는 다른 트리들보다 부족해 보입니다. 하지만, jQuery 상에서 구현된 만큼 이에 대한 지원을 쉽게 추가할 수 있으리라고 예상합니다. 문서도 잘되어 있지만 아직 완전한 것은 아닌 것 같습니다.

from jsTree: jQuery-based JavaScript tree component
Posted by 행복한고니 트랙백 0 : 댓글 2

댓글을 달아 주세요

  1. addr | edit/del | reply 2009.01.05 21:20

    비밀댓글입니다

    • addr | edit/del BlogIcon 행복한고니 2009.01.08 00:44 신고

      안녕하세요, 행복한고니입니다.
      "php를 xsl로 파싱했다"는 의미를 정확히 잘 모르겠습니다. ^^;;

      조금 더 자세히 설명해주신다면 도움을 드릴 수도 있을 것 같습니다.