맨위로가기
 

SBUx

닫기

2.23 트리의 항목을 클릭시 불러오기

STEP 1. tree 컴포넌트 생성

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

STEP 2. changeChildTreeNode Method 사용

1. 새로 추가할 tree data를 준비합니다.
<script>
    var innerData = [
        {"id":"1_1_1",	"pid":"1_1",	"order":"1",	"text":"전문위원실 1"},
        {"id":"1_1_2",	"pid":"1_1_1",	"order":"1",	"text":"전문하위 1_1" },
        {"id":"1_1_3",	"pid":"1_1_1",	"order":"2",	"text":"전문하위 1_2"},
        {"id":"1_1_4",	"pid":"1_1_1",	"order":"3",	"text":"전문하위 1_2_1"},
        {"id":"1_1_5",	"pid":"1_1_1",	"order":"4",	"text":"전문하위 1_2_2"},
        {"id":"2_1_1",	"pid":"1_1",	"order":"1",	"text":"전문위원실 2"},
    ];
</script>
2. changeChildTreeNode Method를 사용하기 위한 function을 추가합니다.
<script>
    var treeJsonData = [
        {"id":"0",	"pid":"-1",	"order":"1",	"text":"1"},
        {"id":"1",	"pid":"0",	"order":"1",	"text":"1_1" },
        {"id":"2",	"pid":"0",	"order":"2",	"text":"1_2"},
        {"id":"1_1",	"pid":"1",	"order":"1",	"text":"1_1_1"},
        {"id":"2_1",	"pid":"2",	"order":"1",	"text":"2_1_1"},
    ];
	
    var innerData = [
        {"id":"1_1_1",	"pid":"1_1",	"order":"1",	"text":"전문위원실 1"},
        {"id":"1_1_2",	"pid":"1_1_1",	"order":"1",	"text":"전문하위 1_1" },
        {"id":"1_1_3",	"pid":"1_1_1",	"order":"2",	"text":"전문하위 1_2"},
        {"id":"1_1_4",	"pid":"1_1_1",	"order":"3",	"text":"전문하위 1_2_1"},
        {"id":"1_1_5",	"pid":"1_1_1",	"order":"4",	"text":"전문하위 1_2_2"},
        {"id":"2_1_1",	"pid":"1_1",	"order":"1",	"text":"전문위원실 2"},
    ]; 
    
    function treeNodeChange(){
        SBUxMethod.changeChildTreeNode('sbIdx1_1', innerData , '1_1');
    }
</script>
<sbux-button id="btn_norm" name="btn_norm" uitype="normal" text="changeChildTreeNode" onclick="treeNodeChange()"></sbux-button>
<sbux-tree id="sbIdx1_1" name="sbIdx1_1" uitype="normal" jsondata-ref="treeJsonData"></sbux-tree>

트리를 펼치고 버튼을 눌러 추가되는 노드를 확인해보세요.