맨위로가기
 

SBUx

닫기

1.8 그리드와 컴포넌트들 연결하기

STEP 1. 그리드 연동 (script)

1. 그리드를 생성합니다. 
<script>
    var datagrid;
    var SBGridProperties={};
    var sbgridData=[
        {name:'이현수', gender:'남', phone:'01066479768'},
        {name:'정기승', gender:'남', phone:'01022454487'},
        {name:'한수정', gender:'여', phone:'01088956544'}
    ];

    $(document).ready(function(){
        createGrid();
    });

    function createGrid(){
        SBGridProperties.parentid='SBGridArea';
        SBGridProperties.id='datagrid';
        SBGridProperties.jsonref='sbgridData';
        SBGridProperties.columns=[
            {caption:['col1'], ref:'name', width:'150px', type:'input'},
            {caption:['col2'], ref:'gender', width:'150px', type:'input'},
            {caption:['col3'], ref:'phone', width:'150px', type:'input'}
        ];
        datagrid = _SBGrid.create(SBGridProperties);
    };
</script>
2. 연동할 column ref와 component name을 같게 설정합니다. 
<script>
    var datagrid;
    var SBGridProperties={};
    var sbgridData=[
        {name:'이현수', gender:'남', phone:'01066479768'},
        {name:'정기승', gender:'남', phone:'01022454487'},
        {name:'한수정', gender:'여', phone:'01088956544'}
    ];

    $(document).ready(function(){
        createGrid();
    });

    function createGrid(){
        SBGridProperties.parentid='SBGridArea';
        SBGridProperties.id='datagrid';
        SBGridProperties.jsonref='sbgridData';
        SBGridProperties.columns=[
            {caption:['col1'], ref:'name', width:'150px', type:'input'},
            {caption:['col2'], ref:'gender', width:'150px', type:'input'},
            {caption:['col3'], ref:'phone', width:'150px', type:'input'}
        ];
        datagrid = _SBGrid.create(SBGridProperties);
    };
</script>
<sbux-input id="sbIdx" name="name" uitype="text"></sbux-input>
3. 컴포넌트의 grid-id 속성과 그리드의 id를 같게 설정합니다. 
<script>
    var datagrid;
    var SBGridProperties={};
    var sbgridData=[
        {name:'이현수', gender:'남', phone:'01066479768'},
        {name:'정기승', gender:'남', phone:'01022454487'},
        {name:'한수정', gender:'여', phone:'01088956544'}
    ];

    $(document).ready(function(){
        createGrid();
    });

    function createGrid(){
        SBGridProperties.parentid='SBGridArea';
        SBGridProperties.id='datagrid';
        SBGridProperties.jsonref='sbgridData';
        SBGridProperties.columns=[
            {caption:['col1'], ref:'name', width:'150px', type:'input'},
            {caption:['col2'], ref:'gender', width:'150px', type:'input'},
            {caption:['col3'], ref:'phone', width:'150px', type:'input'}
        ];
        datagrid = _SBGrid.create(SBGridProperties);
    };
</script>
<div id="SBGridArea"  style="width:500px; height:300px"></div>
<sbux-input id="sbIdx" name="name" uitype="text" grid-id="datagrid"></sbux-input>