SBUx - OVERVIEW

Tutorials

2.22 트리의 특정 레벨들을 확장한 채로 나타내기

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>

2. is-expand 속성을 추가합니다.

<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" is-expand="true" ></sbux-tree>

STEP 2. 속성으로 펼치기

1. expand-open-level로 펼칠 level을 설정합니다.

<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" is-expand="true" expand-open-level="1" ></sbux-tree>

STEP 3. Method로 펼치기

1. set Method를 사용합니다.

<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-button id="btn_norm" name="btn_norm" uitype="normal" text="SET" onclick="SBUxMethod.set('sbIdx1', '2_2_1', 'expand');"></sbux-button>
<sbux-tree id="sbIdx1" name="sbIdx1" uitype="normal" jsondata-ref="treeJsonData"></sbux-tree>

2. expandTreeChildNodes Method를 사용합니다.

<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-button id="btn_norm" name="btn_norm" uitype="normal" text="expandTreeChildNodes" onclick="SBUxMethod.expandTreeChildNodes('sbIdx1', '2', '3');"></sbux-button>
<sbux-tree id="sbIdx1" name="sbIdx1" uitype="normal" jsondata-ref="treeJsonData"></sbux-tree>

expand-open-level 속성을 통해 열린 Tree입니다.

set 버튼 클릭시 Tree가 펼쳐집니다.

expandTreeChildNodes 버튼을 클릭해 자식노드를 펼쳐보세요.