맨위로가기
 

SBUx

닫기

Tree

상하위 관계를 가진 tree 컴포넌트 입니다.

기본 사항

사항 설명 비고
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 사항

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.expandTreeNodes 지정한 노드부터 하위레벨 만큼 떨어진 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.dynamic string 형태로 입력하여 동적 생성 s | f
SBUxMethod.render <sbux-xxx tag >랜더링 s | f