- ---------------------------------------------------------------------------
- 1) JSON Data 형식
- ---------------------------------------------------------------------------
-> 병렬구조. id, pid로 계층 구현함. root일 경우 pId=0
-> Data JSON으로 구현.
- ---------------------------------------------------------------------------
- 2) 구성요소
- ---------------------------------------------------------------------------
- setting , data(ajax), $.fn.zTree.init();으로 구성됨.
- ---------------------------------------------------------------------------
- 3) Data Icon / Icon Skin
- ---------------------------------------------------------------------------
- DataJSON에 iconOpen/iconClose/icon에 이미지 경로를 집어넣으면됨.
- html이라 상대경로가 되지만(실행되는 html기준), Tapestry의 경우 절대경로(URL)넣거나 해야할 수가 있음.
*Icon Skin
: css를 미리 지정해놓고, Data JSON에서는 iconSkin:스킨명.
: .ztree li span.button.스킨명_ico_docu
4) HyperLink / URL
- Data JSON에 url 경로 포함, target지정 가능.
- JS실행 시킬 수도 있음. click:’javascript code’..
5) Async( Ajax 연동 )
: 세부적인 옵션은 API보면서 다시 파악해봐야할듯.
- async : {
enable : true,
url : “경로”,
autoParam : [], //??
otherParam : {},
dataFilter : //
}
- 현재, 컴포넌트로 구현중, Event 버블링 트리거가 동작하지 않는다..ㅠ
- 안되는 이유를 찾았음. event버블링시 triggerEvent로 찾는게 하위 페이지클래스에서 지정한 이벤트타입이다.
- 즉, trigger로 getData를 검색시, page클래스에서 @OnEvent(value=”getData”)로 지정해야함.
(나는 page에서의 이벤트 설정을 @OnEvent(value=”data”) 로 했었기때문에 tapestry가 못찾는 것임.)
- trigger가 찾는것이 Event value이므로.. 그전에 나는 어떻게 이해했지??;;;
*Data(Event) –> Component 처리 –> getData(Event버블) –> Page 처리.
[2013-12-13] Tree관련하여 구현해야할 목록.
1) TForm과 연계. (체크박스를 선택 후 저장하려 할 경우 필요.)
- Zone과도 연계.
*zone 과 연계중 이상한점
zone으로 폼 전송 시, id값이 갑자기 바뀜
AbstractField 자바스크립트가 id를 재설정하기때문에 문제였음.
또한, clientId와 getClientId()가 다름.
clientId는 내가 초기에 지정한 Id를 말하며,
getClientId()는 zone을 통해 다시 Render될때 받는 assignedClient를 의미함.
지금의 경우, 바뀐 Id로 tree다시 렌더해줘야하니, assignedClientId를 사용하면 문제해결.
2) Context Menu 기능 구현. (issue Javascript 추가 import 후 접근 가능한지.)
- X , Y 좌표 R&D.
3) ZTree callback Event 조사 / 테스트 확인.
*removeClass 인식못하는 현상 수정.
*checkbox가 생겼다 안생겼다하는 걸 봐서는 import문제가 또있는듯.
-requirejs import문제. 2번째 js가 import됫다 안됫다함
-일단 하나로 통합된 all버전 js를 넣어서 해결하긴 했지만, 근본적인 문제는 그대로임.
4) Auto Connection이 안된다..;;
@Persist를 안함..;; 헐..
*ZTree API
1) ztree object 가져오기
- var zTree = $.fn.zTree.getZTreeObj("treeDemo")
[basic functions]
1) 기본 CRUD 기능 – getData JSON 만들기.
2) 기본 Search Nodes.
3) 기본 callback Event function.
4) Context Menu –> bootstrap dropdown을 익혀야함. [x,y좌표 조절]
[checkbox/radio]
1) checkbox getData JSON. [완료]
2) radio getData JSON.
[editting]
- Drag & Drop
- Multiple Tree
[Bigdata Tree]
[ETC – Multi Function]
-Context Menu
-Left Menu
-dropdown menu