| 사항 | 설명 | 비고 | |
|---|---|---|---|
| HTML 태그 형태 | <sbux-tree></sbux-tree> |
||
| 필수 속성 | id, name, uitype | 고정형 | |
| 변동형 | jsondata-ref | ||
| * 2.6.962 버전이후 변경사항 : - id 속성 미사용시 name 값으로 자동 매핑 - uitype 속성 미사용시 SBUxDefault.js 에 설정된 값으로 자동 매핑 |
|||
| uitype 속성 값 | normal, checkbox | ||
| 자식 Dom 구조 | 고정형 | <tree-item> |
item 을 구성하는 구조 |
| 변동형 | JSON Data 사용 |
가변적인 데이터시 사용 | |
| 예시) HTML 형태의 개발 - 고정형 |
|---|
|
<script> function evt_onclick (args){ alert("Tree 클릭시 이벤트 : "+args ); } </script> <sbux-tree id="idxTree_norm" name="tree_norm" uitype="normal" storage-data="value" is-expand="true" onclick="evt_onclick(tree_norm)"> <tree-item link="javascript:void(0)" text="관심사" value="Root"> <tree-item link="javascript:void(0)" text="주거" value="residence"> <tree-item link="javascript:void(0)" text="주택" value="house"></tree-item> <tree-item link="javascript:void(0)" text="아파트" value="house"></tree-item> </tree-item> <tree-item link="javascript:void(0)" text="이동수단" value="Vehicles"> <tree-item link="javascript:void(0)" text="자동차" value="Cars"> <tree-item link="javascript:void(0)" text="클래식" value="Classics"> </tree-item> <tree-item link="javascript:void(0)" text="오픈카" value="Convertibles"> </tree-item> <tree-item link="javascript:void(0)" text="쿠페" value="Coupes"></tree-item> </tree-item> <tree-item link="javascript:void(0)" text="모터싸이클" value="Motorcycles"> </tree-item> <tree-item link="javascript:void(0)" text="보트" value="Boats"></tree-item> </tree-item> <tree-item link="javascript:void(0)" text="직장" value="dog" image-src="./../sbux/data/company.png" image-style="width:25px;height:25px;"></tree-item> </tree-item> </sbux-tree> |
| 예시) HTML 형태의 개발 - 변동형 |
|---|
|
<script> var treeJsonData = [ { "id" : "0", "pid" : "-1", "order" : "1", "text" : "관심사" , "value" : "" , "link" : "javascript:void(0)", "cssstyle": "font-size:14px;" }, { "id" : "3", "pid" : "0", "order" : "3", "text" : "직장" , "value" : "S" , "link" : "javascript:void(0)", "imagesrc" :"./../sbux/data/companyLogo.png" , "imagestyle" : "width:25px;height:25px;" }, { "id" : "4_2_3", "pid" : "4_2","order" : "3", "text" : "오픈카" , "value" : "" , "link" : "javascript:void(0)" }, { "id" : "4_1", "pid" : "4", "order" : "1", "text" : "자전거" , "value" : "" , "link" : "javascript:void(0)" }, { "id" : "4_2_1", "pid" : "4_2","order" : "1", "text" : "클래식" , "value" : "" , "link" : "javascript:void(0)" }, { "id" : "4_2", "pid" : "4", "order" : "2", "text" : "자동차" , "value" : "" , "link" : "javascript:void(0)" }, { "id" : "4", "pid" : "0", "order" : "4", "text" : "이동수단" , "value" : "" , "link" : "javascript:void(0)" }, { "id" : "4_4", "pid" : "4", "order" : "4", "text" : "보트" , "value" : "" , "link" : "javascript:void(0)" }, { "id" : "4_2_4", "pid" : "4_2","order" : "4", "text" : "쿠페" , "value" : "A" , "link" : "javascript:void(0)" }, { "id" : "4_3", "pid" : "4", "order" : "3", "text" : "모터싸이클" , "value" : "" , "link" : "javascript:void(0)" }, { "id" : "1", "pid" : "0", "order" : "1", "text" : "여가활동" , "value" : "B" , "link" : "javascript:void(0)" }, { "id" : "2", "pid" : "0", "order" : "2", "text" : "주거" , "value" : "" , "link" : "javascript:void(0)" }, { "id" : "2_1", "pid" : "2", "order" : "1", "text" : "주택" , "value" : "" , "link" : "javascript:void(0)" }, { "id" : "2_2", "pid" : "2", "order" : "2", "text" : "아파트" , "value" : "A" , "link" : "javascript:void(0)" } ]; </script> <sbux-tree id="idxTreeChk_json" name="treechk_json" uitype="checkbox" storage-data="text" jsondata-ref="treeJsonData" jsondata-text="text" jsondata-value="value" jsondata-link="link" jsondata-id="id" jsondata-pid="pid" jsondata-order="order" jsondata-image-src="imagesrc" jsondata-image-style="imagestyle"></sbux-tree> |
| 예시) jQuery Plugin 형태의 개발 |
|---|
|
<div id="sbArea"></div> <script> var treeJsonData=[ { "id":"1", "pid":"-1", "order" : "1", "text" : "1" }, { "id":"1_1", "pid":"1", "order" : "1", "text" : "1_1" }, { "id":"1_2", "pid":"1", "order" : "2", "text" : "1_2" }, { "id":"1_1_1", "pid":"1_1", "order" : "1", "text" : "1_1_1" }, { "id":"1_2_1", "pid":"1_2", "order" : "2", "text" : "1_2_1" } ]; $(document).ready(function(){ $('#sbArea').sbTree({ name : 'sbScriptNm', uitype : 'normal', jsondataRef : 'treeJsonData' }); }); </script> |
| 속성명 | 설명 / 유형(n:normal, c:checkbox) | 비고 | |
|---|---|---|---|
| storage-data | model 값으로 저장되는 데이터 형태를 결정짓는 속성 model 값은 SBUxMethod.get 을 통한 컴포넌트값 반환시 사용됩니다. |
n | c | (text | value | object) |
| is-expand | 생성시 초기 상태를 확장형태로 변경 | n | c | (false | true) |
| is-expand-only-select | 하나의 node 만 확장 | n | c | (false | true) |
| expand-type | 하위 노드 확장/축소 이벤트 범위 속성 all : text와 icon , icon : icon 클릭시에만 |
n | c | (all | icon) |
| expand-open-level | 생성시 확장되는 하위 레벨을 지정 is-expand="true" 인 상태에서 숫자로 표시 |
n | c | (하위 레벨 숫자) |
| reselect-deselect | 선택한 노드의 재선택시 선택이 되지 않게 하는 속성 선택을 한 후 다시 선택시 해제를 할 수 없게 만드는 기능 |
n | c | (true | false) |
| trigger | icon 과 text 에 대한 확장/축소 이벤트 동작 속성 원클릭 또는 더블클릭시 확장/축소 결정 icon 과 text 에 모두 적용 |
n | c | (click | dblclick) |
| trigger-icon | icon 에 대한 확장/축소 이벤트 동작 속성 | n | c | (click | dblclick) |
| trigger-item | text 에 대한 확장/축소 이벤트 동작 속성 | n | c | (click | dblclick) |
| save-status-type | text 또는 icon 클릭 시 선택 정보 여부 결정 속성 all : text 또는 icon 클릭 시에 해당 item 을 선택한 것으로 간주 item : text 클릭 시에만 해당 item 을 선택한 것으로 간주 |
n | c | (all | item) |
| show-delete-confirm | SBUxMethod.remove 를 통한 노드 삭제시 Confirm 메시지를 화면에 표시할 지 지정하는 속성 |
n | c | (false | true) |
| show-root-vline | root 노드에 세로선을 추가하여 root 노드간 연결형태를 나타내는 속성 | n | c | (false | true) |
| show-parent-checkbox | 자식 노드에 대해 일괄적으로 check/uncheck 할 수 있는 속성 | c | (false | true) |
| traverse-up-check | 부모 노드의 checkbox 가 가능할 때 부모노드 check 시 자식노드까지 모두 check 되는 기본(traverseUp Check)기능을 off 시킬 수 있는 속성 |
c | (true | false) |
| target-name | 메뉴명 클릭시 이동할 iframe 의 name 명 | n | c | |
| target | 메뉴명 클릭시 이동할 target 명 | n | c | _blank: 빈 window 창 _window: layer window 창 _top: top target _self: 호출한 화면 _parent: 부모 target '특정 frame명': 특정 target |
| onclick | 클릭시 이벤트 | n | c | |
| ondblclick | 더블 클릭시 이벤트 | n | c | |
| onchange | 값 변경시 이벤트 | n | c | |
| 하위구조 태그명 | 속성명 | 설명 | 비고 |
|---|---|---|---|
| <tree-item> | 각 노드의 item 을 구성하는 구조 | ||
| link | 클릭시 이동하는 링크 주소 | ||
| text | item 의 문구를 나타내는 속성 | ||
| value | item 의 value 값을 나타내는 속성 | ||
| image-src | item 의 좌측 이미지 경로 속성 | ||
| image-style | item 의 좌측 이미지 style 속성 | ||
| css-style | 텍스트에 적용되는 css 스타일 속성 | ||
| target-name | 메뉴명 클릭시 이동할 iframe 의 name 명 | ||
| target | 메뉴명 클릭시 이동할 target 명 | _blank: 빈 window 창 _window: layer window 창 _top: top target _self: 호출한 화면 _parent: 부모 target '특정 frame명': 특정 target |
|
| 속성명 | 설명 / 유형(n:normal, c:checkbox) | 비고 | |
|---|---|---|---|
| storage-data | model 값으로 저장되는 데이터 형태를 결정짓는 속성 model 값은 SBUxMethod.get 을 통한 컴포넌트값 반환시 사용됩니다. |
n | c | (text | value | object) |
| is-expand | 생성시 초기 상태를 확장형태로 변경 | n | c | (false | true) |
| is-expand-only-select | 하나의 node 만 확장 | n | c | (false | true) |
| expand-type | 하위 노드 확장/축소 이벤트 범위 속성 all : text와 icon , icon : icon 클릭시에만 |
n | c | (all | icon) |
| expand-open-level | 생성시 확장되는 하위 레벨을 지정 is-expand="true" 인 상태에서 숫자로 표시 |
n | c | (하위 레벨 숫자) |
| reselect-deselect | 선택한 노드의 재선택시 선택이 되지 않게 하는 속성 선택을 한 후 다시 선택시 해제를 할 수 없게 만드는 기능 |
n | c | (true | false) |
| trigger | icon 과 text 에 대한 확장/축소 이벤트 동작 속성 원클릭 또는 더블클릭시 확장/축소 결정 icon 과 text 에 모두 적용 |
n | c | (click | dblclick) |
| trigger-icon | icon 에 대한 확장/축소 이벤트 동작 속성 | n | c | (click | dblclick) |
| trigger-item | text 에 대한 확장/축소 이벤트 동작 속성 | n | c | (click | dblclick) |
| save-status-type | text 또는 icon 클릭 시 선택 정보 여부 결정 속성 - all : text 또는 icon 클릭 시에 item 을 선택한 것으로 받아들임 - item : text 클릭 시에만 item 을 선택한 것으로 받아들임 |
n | c | (all | item) |
| show-delete-confirm | SBUxMethod.remove 를 통한 노드 삭제시 Confirm 메시지를 화면에 표시할 지 지정하는 속성 |
n | c | (false | true) |
| show-tooltip | 노드에 마우스 오버시 tooltip 사용여부 | n | c | (false | true) |
| show-tooltip-key | 노드에 마우스 오버시 tooltip 의 내용이 되는 매칭 키 | n | c | (text | 사용자지정) |
| show-root-vline | root 노드에 세로선을 추가하여 root 노드간 연결형태를 나타내는 속성 | n | c | (false | true) |
| move-scroll-target-id | tree 를 감싸는 div 영역의 id를 설정 조회시 tree scroll 이 이동하는 기능을 위해 tree 를 div 로 감싼다. |
n | c | (false | true) |
| move-scroll-node-height | scroll 이동 계산을 위한 Node 의 높이에 대한 지정값 보정을 하기 위한 높이값으로 사용 |
n | c | (32 | 사용자지정) |
| empty-message | json data 의 size 가 0 일때 나타나는 문구 설정 | n | c | |
| show-parent-checkbox | 자식 노드에 대해 일괄적으로 check/uncheck 할 수 있는 속성 | c | (false | true) |
| traverse-up-check | 부모 노드의 checkbox 가 가능할 때 부모노드 check 시 자식노드까지 모두 check 되는 기본(traverseUp Check)기능을 off 시킬 수 있는 속성 |
c | (true | false) |
| jsondata-ref | json data 참조 변수명 예시) json data 구조 var jsondata = [{"id":"1","pid":"0","order":"1", "text":"소프트","value":"softbowl", "link":""./../xxx.do", "cssstyle":"font-size:25px", "imagesrc" : "./images/icon/iconTitle.gif", "imagestyle" : "width:25px;height:25px;", "imagetitle" : "image", "disabled" : "disabled","targetname" : "subframe","target" : "_blank"}] |
n | c | |
| jsondata-id | json data 내 id 참조 키명 | n | c | (id | 사용자지정) |
| jsondata-pid | json data 내 pid 참조 키명 | n | c | (pid | 사용자지정) |
| jsondata-order | json data 내 order 참조 키명 | n | c | (ordedr | 사용자지정) |
| jsondata-text | json data 내 text 참조 키명 | n | c | (text | 사용자지정) |
| jsondata-value | json data 내 value 참조 키명 | n | c | (value | 사용자지정) |
| jsondata-link | json data 내 link 참조 키명 | n | c | (link | 사용자지정) |
| jsondata-image-src | json data 내 image 경로 참조 키명 | n | c | |
| jsondata-image-style | json data 내 image style 참조 키명 | n | c | |
| jsondata-image-title | json data 내 image title 참조 키명 | n | c | |
| jsondata-target-name | json data 내 iframe 명에 대한 참조 키명 | n | c | |
| jsondata-target | json data 내 target 명에 대한 참조 키명 | n | c | |
| imagedata-ref | depth 별 이미지를 매핑 참조 예시) json data 구조 var depthImageData = [ { "level" : "1", "src" : "./../../subway1.gif", "style" : "width:10px", "alt" : "이미지1", "title" : "이미지1" }] |
n | c | |
| image-render | 노드에 해당하는 image 를 render 형태로 받을 수 있는 속성 예시) function renderFunction(args) { if(args.text === '이동수단'){ return '<img src="./../../subway1.gif" class="sbux-tre-item-img" alt="image" title="image"/>' } } <sbux-tree ... image-render="renderFunction" ... |
n | c | |
| target-name | 메뉴명 클릭시 이동할 iframe 의 name 명 | n | c | |
| target | 메뉴명 클릭시 이동할 target 명 | n | c | _blank: 빈 window 창 _window: layer window 창 _top: top target _self: 호출한 화면 _parent: 부모 target '특정 frame명': 특정 target |
| trigger-icon-callback | icon 을 클릭할 때 발생하는 callback 함수 | n | c | |
| callback-before | tree 를 만들기 전에 callback 함수 호출 | n | c | |
| callback-after | tree 를 만든 후에 callback 함수 호출 | n | c | |
| callback-before-refresh | SBUxMethod.refresh('tree 모델명') 을 통해 호출 시
tree 재구성하기 전에 callback 함수 호출 |
n | c | |
| callback-after-refresh | SBUxMethod.refresh('tree 모델명') 을 통해 호출 시
tree 재구성한 후에 callback 함수 호출 |
n | c | |
| onclick | 클릭시 이벤트 | n | c | |
| ondblclick | 더블 클릭시 이벤트 | n | c | |
| onchange | 값 변경시 이벤트 | n | c | |
| API 명 | 설명 / 데이터형(s:고정형,f:변동형) | 비고 | |
|---|---|---|---|
| SBUxMethod.set | 값을 입력 | s | f | |
| SBUxMethod.get | 저장된 값 호출 | s | f | |
| SBUxMethod.setText | tree 의 text 값으로 선택 및 확장 확장옵션 - expand : Node Id 가 부모를 가진 Node 라면 상위 Node 하나만 펼쳐짐 (펼쳐진 상태에서 실행시에는 닫혀짐) - expandParents : Node Id 에 접근하는 경로의 Node 들이 모두 펼쳐짐 - collapseParents : Node Id 에 접근하는 경로의 Node 들이 모두 닫혀짐 - expandParentsChild : 선택된 Node의 Parent와 바로 하위 Child가 펼쳐짐 예시) SBUxMethod.setText SBUxMethod.setText('모델명', 'tree의 text', { extValue : '확장옵션' }) SBUxMethod.setText('tree_norm', '주거', {extValue : 'expand'}) |
s | f | |
| SBUxMethod.setValue | tree 의 value 값으로 선택 및 확장 확장옵션 - expand : Node Id 가 부모를 가진 Node 라면 상위 Node 하나만 펼쳐짐 (펼쳐진 상태에서 실행시에는 닫혀짐) - expandParents : Node Id 에 접근하는 경로의 Node 들이 모두 펼쳐짐 - collapseParents : Node Id 에 접근하는 경로의 Node 들이 모두 닫혀짐 - expandParentsChild : 선택된 Node의 Parent와 바로 하위 Child가 펼쳐짐 예시) SBUxMethod.setValue SBUxMethod.setValue('모델명', 'tree의 value', { extValue : '확장옵션' }) SBUxMethod.setValue('tree_norm', 'C', {extValue : 'expand'}) |
s | f | |
| SBUxMethod.refresh | 재호출 | s | f | |
| SBUxMethod.hide | 감추기 | s | f | |
| SBUxMethod.show | 보이기 | s | f | |
| SBUxMethod.getTreeStatus | 선택된 노드의 값들을 나타냄 SBUxMethod.getTreeStatus('모델명') SBUxMethod.getTreeStatus('모델명','id') |
s | f | |
| SBUxMethod.editTreeNode | 노드의 값을 변경 SBUxMethod.editTreeNode('모델명','id',변경할 노드 object) |
s | f | |
| SBUxMethod.removeTreeNode | 노드를 삭제 SBUxMethod.removeTreeNode('모델명','id') (* 삭제할 id , 공백일 경우 선택으로 지정된 노드를 삭제) |
s | f | |
| SBUxMethod.addTreeNode | 노드를 추가 SBUxMethod.addTreeNode('모델명', 추가할 유형, 추가할 노드 object, '기준 노드 ID') |
s | f | |
| SBUxMethod.getUpdateData | 추가,삭제,변경 이력을 object 배열 형태로 반환 SBUxMethod.getUpdateData('모델명','all','status') |
s | f | |
| SBUxMethod.getTreeSiblingData | 지정된 level의 노드들을 반환 SBUxMethod.getTreeSiblingData('모델명', 'rootId', '추출할 level', '필터링할key값') |
s | f | |
| SBUxMethod.expandTreeNodes | 지정한 노드부터 하위레벨 만큼 떨어진 Node들을 확장 SBUxMethod.expandTreeNodes('모델명', '특정 node id', '특정 node부터 하위 open 시킬 레벨') |
s | f | |
| SBUxMethod.collapseTreeNodes | 지정한 노드부터 하위레벨 만큼 떨어진 Node들을 닫음 SBUxMethod.collapseTreeNodes('모델명', '특정 node id', '특정 node부터 하위 close 시킬 레벨') |
s | f | |
| SBUxMethod.expandTreeChildNodes | 지정한 노드의 하위레벨의 node를 openLevel 만큼 확장 SBUxMethod.expandTreeChildNodes('모델명', '선택할노드 ID', '확장할 level') |
s | f | |
| SBUxMethod.changeChildTreeNode | childe Node를 Jsondata 내용으로 변경 SBUxMethod.changeChildTreeNode('모델명', 'Jsondata', '부모Node Id', history 저장여부) |
s | f | |
| SBUxMethod.render | <sbux-xxx tag >랜더링 | s | f | |
