맨위로가기
 

SBUx

닫기

2.6 콤보박스의 마스터 디테일관계 연결하기

STEP 1. 콤보박스 생성

1. 마스터 콤보박스를 생성합니다.
<script>
var json_master = [
        {text : 'input', value : 'iValue'},
        {text : 'picker', value : 'pValue'},
        {text : 'radio', value : 'rValue'},
        {text : 'select', value : 'sValue'}
    ];
</script>
<sbux-select id="sbIdx1_1" name="sbName1" uitype="single" jsondata-ref="json_master"></sbux-select>
2. 마스터 콤보박스와 연결할 디테일 콤보박스를 생성합니다.
<script>
    var json_master = [
        {text : 'input', value : 'iValue'},
        {text : 'picker', value : 'pValue'},
        {text : 'radio', value : 'rValue'},
        {text : 'select', value : 'sValue'}
    ];
    
    var json_detail = [
        {text : 'text', value : 'text'},
        {text : 'password', value : 'password'},
        {text : 'popup', value : 'popup'},
        {text : 'inline', value : 'inline'},
        {text : 'normal', value : 'normal'},
        {text : 'single', value : 'single'},
        {text : 'checkbox', value : 'checkbox'}
    ];
</script>
<sbux-select id="sbIdx1_1" name="sbName1" uitype="single" jsondata-ref="json_master"></sbux-select>
<sbux-select id="sbIdx1_2" name="sbName1_2" uitype="single" jsondata-ref="json_detail"></sbux-select>

STEP 2. 마스터 디테일 연결 하기

1. 디테일 콤보박스에 jsondata-filter, filter-source-name 속성을 추가합니다.
<sbux-select id="sbIdx1_2" name="sbName1_2" uitype="single" jsondata-ref="json_detail" filter-source-name="sbName1" jsondata-filter="mastervalue"></sbux-select>
2. 디테일 데이터에 마스터와 연결에 필요한 데이터를 추가합니다.
<script>
    var json_detail = [
        {text : 'text', value : 'text', mastervalue : 'iValue'},
        {text : 'password', value : 'password', mastervalue : 'iValue'},
        {text : 'popup', value : 'popup', mastervalue : 'pValue'},
        {text : 'inline', value : 'inline', mastervalue : 'pValue'},
        {text : 'normal', value : 'normal', mastervalue : 'rValue'},
        {text : 'single', value : 'single', mastervalue : 'sValue'},
        {text : 'checkbox', value : 'checkbox', mastervalue : 'sValue'}
    ];
</script>

select_master 따라 select_detail의 item이 달라지는 것을 확인해보세요.

select_master

select_detail