dojo toolkit 버젼은 0.4, 1.0등이 있으며, api 방식이 상이하다.
앞으로의 dojo toolit 설명은 1.0 기준으로 작성한다.


트리 위젯 추가하기

  1. dojo 스크립트를 로드한다.
    <script type="text/javascript" src="<c:url value="/inc/dojo/dojo/dojo.js" />" djConfig="parseOnLoad: true"></script>
  2. Tree 구성에 필요한 라이브러리를 로드한다.
    <script>
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.Tree");
    dojo.require("dojo.parser");
    </script>
  3. css 로드
    <style type="text/css">
        @import "<c:url value="/inc/dojo/dijit/themes/tundra/tundra.css" />";
        @import "<c:url value="/inc/dojo/dojo/resources/dojo.css" />";
    </stye>
  4. <body>에 트리 위젯 엘리먼트 추가
    <div dojoType="dojo.data.ItemFileReadStore"
         url="tree.json" jsid="categoryData" />
    <div dojoType="dijit.Tree" store="categoryData" labelAttr="name" label="카테고리" />
  5. 데이타 저장소(ie. jsid:categoryData) 트리의 구조는 다음과 같다.
    1. 데이타는 json 으로 작성되어야 한다
    2. 루트 속성으로 identifer 값과 label 값을 지정한다.
      identifier 는 트리 요소의 고유 키로 사용되며 유니크해야한다.
      label 은 트리 표현시 각 요소의 표현될 이름으로 사용된다.
      이것에 대해 json 데이타의 어떤 속성과 매핑되는지 기술해야하는 것이다.
    3. 루트는 items 배열을 가지며 그 자식으로 실제 트리 구성 요소를 입력한다.
    4. 트리 구성 요소의 자식들은 children 이란 이름을 가지며, 자식 또한 배열이어야한다.
    { label: 'name',
      identifier: 'name',
       items: [
         { name:'Fruit', type:'category'},
         { name:'Cinammon', type: 'category',
           children: [
              { name:'Cinammon Roll', type:'poptart' },
              { name:'Brown Sugar Cinnamon', type:'poptart' },
              { name:'French Toast', type:'poptart' }
           ]
         },
         { name:'Chocolate', type: 'category'}
      ]
    }

클릭 이벤트

<div dojoType="dijit.Tree" store="categoryData" labelAttr="name" label="카테고리">
 <script type="dojo/method" event="onClick" args="item">
  alert(categoryData.getLabel(item)); // 이름 얻기
  alert(categoryData.getValue(item, "id")); // 기타 다른 속성 얻기, 식별자외에도 가능함
 </script>
</div>

클래스 변경

<div dojoType="dijit.Tree" store="categoryData" labelAttr="name" label="카테고리">
 <script type="dojo/method" event="getLabelClass" args="item">
  if (item != null && categoryData.getValue(item, "type") == 'category') {
   return categoryData.getValue(item, "type");
        }else {
      return "dir";
   }
   </script>
</div>

+ Recent posts