맨위로가기
 

SBUx

닫기

2.24 트리의 특정항목으로 바로 이동시켜 포커싱하기

STEP 1. tree 컴포넌트 생성

1. tree 컴포넌트를 생성합니다. 
<script>
    var treeJsonData = [
        {"id":"1",	"pid":"0",	"order":"1",	"text":"1"},
        {"id":"2",	"pid":"0",	"order":"2",	"text":"2" },
        {"id":"1_1",	"pid":"1",	"order":"1",	"text":"1_1"},
        {"id":"1_2",	"pid":"1",	"order":"2",	"text":"1_2"},
        {"id":"2_1",	"pid":"2",	"order":"1",	"text":"2_1"},
        {"id":"2_2",	"pid":"2",	"order":"2",	"text":"2_2"},
        {"id":"2_2_1",	"pid":"2_2",	"order":"1", 	"text":"2_2_1"}
    ];
</script>
<sbux-tree id="sbIdx1" name="sbIdx1" uitype="normal" jsondata-ref="treeJsonData" ></sbux-tree>

STEP 2. set Method 사용

1. set Method를 사용하여 tree를 펼칩니다. 
<script>
    var treeJsonData = [
        {"id":"1",	"pid":"0",	"order":"1",	"text":"1"},
        {"id":"2",	"pid":"0",	"order":"2",	"text":"2" },
        {"id":"1_1",	"pid":"1",	"order":"1",	"text":"1_1"},
        {"id":"1_2",	"pid":"1",	"order":"2",	"text":"1_2"},
        {"id":"2_1",	"pid":"2",	"order":"1",	"text":"2_1"},
        {"id":"2_2",	"pid":"2",	"order":"2",	"text":"2_2"},
        {"id":"2_2_1",	"pid":"2_2",	"order":"1",	"text":"2_2_1"}
    ];
    $(document).ready(function(){
        SBUxMethod.set('sbIdx1_1', '1_2_1', 'expand')
    });
</script>
<sbux-tree id="sbIdx1" name="sbIdx1" uitype="normal" jsondata-ref="treeJsonData" ></sbux-tree>