webPonent Grid 2.0은 TR노드로 이루어진 마크업, Array<Array>, Array<Map>세가지 형식의 데이터로 그리드에 로우를 추가 할 수 있습니다.
다음은 ajax로 tr노드로 이루어진 data.html을 가져와서 그리드에 로우를 추가하는 예 입니다.
<tr> <td>1</td> <td>areynolds</td> <td>pYhuzU</td> <td>Male</td> </tr> <tr> <td>2</td> <td>egeorge</td> <td>i0X0x4</td> <td>Female</td> </tr> <tr> <td>3</td> <td>jellis</td> <td>tQWflr38bCS</td> <td>Female</td> </tr> <tr> <td>4</td> <td>mbutler</td> <td>FuzZU1FX56</td> <td>Female</td> </tr>
<table id="ci-grid"> </table> <script id="ci-grid-template" type="text/template"> <table> <thead> <tr> <th name="id" >ID</th> <th name="user_name">USER NAME</th> <th name="password">PASSWORD</th> <th name="gender">GENDER</th> </tr> </thead> <tbody> <tr> <td name="id" bind="id" ></td> <td name="user_name" bind="user_name" ></td> <td name="password" bind="password" ></td> <td name="gender" bind="gender" ></td> </tr> </tbody> </table> </script> <script> var table = $('#ci-grid'); var template = $('#ci-grid-template'); var grid = webponent.grid.init(table, template); $.ajax({ url : 'data.html', dataType : 'html', success : function (resp) { grid.appendRow(resp); } }); </script>
다음은 배열<배열>로 이루어진 json데이터를 가져와 로우를 추가하는 예제 입니다. 배열은 키값을 가지고 있지 않기때문에 템플릿의 tbody의 tr에 들어있는 cell과 순서대로 매칭 됩니다.
[ [1, "areynolds", "pYhuzU", "Male"], [2, "egeorge", "i0X0x4", "Female"], [3, "jellis", "tQWflr38bCS", "Female"], [4, "mbutler", "FuzZU1FX56", "Female"] ]] ]>
<table id="ci-grid"> </table> <script id="ci-grid-template" type="text/template"> <table> <thead> <tr> <th name="id" >ID</th> <th name="user_name">USER NAME</th> <th name="password">PASSWORD</th> <th name="gender">GENDER</th> </tr> </thead> <tbody> <tr> <td name="id" bind="id" ></td> <td name="user_name" bind="user_name" ></td> <td name="password" bind="password" ></td> <td name="gender" bind="gender" ></td> </tr> </tbody> </table> </script> <script> var table = $('#ci-grid'); var template = $('#ci-grid-template'); var grid = webponent.grid.init(table, template); $.ajax({ url : 'data.json', dataType : 'json', success : function (resp) { grid.appendRow(resp); } }); </script>
다음은 배열<맵>으로 이루어진 json데이터를 가져와 로우를 추가하는 예제 입니다. 이경우 키값을 가지고 있기때문에 가장 속도가 빠름니다. 제일 추천하는 방식입니다.
[ { "id" : 1, "user_name" : "areynolds", "password" : "pYhuzU", "gender" : "Male" }, { "id" : 2, "user_name" : "egeorge", "password" : "i0X0x4", "gender" : "Female" }, { "id" : 3, "user_name" : "jellis", "password" : "tQWflr38bCS", "gender" : "Female" }, { "id" : 4, "user_name" : "mbutler", "password" : "FuzZU1FX56", "gender" : "Female" } ]] ]>
<table id="ci-grid"> </table> <script id="ci-grid-template" type="text/template"> <table> <thead> <tr> <th name="id" >ID</th> <th name="user_name">USER NAME</th> <th name="password">PASSWORD</th> <th name="gender">GENDER</th> </tr> </thead> <tbody> <tr> <td name="id" bind="id" ></td> <td name="user_name" bind="user_name" ></td> <td name="password" bind="password" ></td> <td name="gender" bind="gender" ></td> </tr> </tbody> </table> </script> <script> var table = $('#ci-grid'); var template = $('#ci-grid-template'); var grid = webponent.grid.init(table, template); $.ajax({ url : 'data.json', dataType : 'json', success : function (resp) { grid.appendRow(resp); } }); </script>
위 세개 예제들은 각각 다른방식으로 그리드에 데이터를 추가하였지만, 동일한 데이터 모델을 가지게 됩니다. 그리고 이 모델은 그리드객체에 data속성으로 참조 할 수 있습니다.
console.log(grid.data);
[ { "id" : 1, "user_name" : "areynolds", "password" : "pYhuzU", "gender" : "Male" }, { "id" : 2, "user_name" : "egeorge", "password" : "i0X0x4", "gender" : "Female" }, { "id" : 3, "user_name" : "jellis", "password" : "tQWflr38bCS", "gender" : "Female" }, { "id" : 4, "user_name" : "mbutler", "password" : "FuzZU1FX56", "gender" : "Female" } ]] ]>
console.log(grid.data[0].user_name);
"areynolds"
Array<Map>형식의 데이터를 이용할때는 더욱 유연한 방식으로 데이터를 바인딩 할 수 있습니다.
th, td이외의 마크업에도 바인딩을 할 수 있습니다. innerTEXT가 존재하는 요소는 해당 요소의 innerTEXT값이 바뀌게 됩니다. input요소인 경우는 해당 요소의 value값을 세팅 합니다.
var data = [ { "id" : 1, "user_name" : "areynolds", "password" : "pYhuzU", "gender" : "Male" }, { "id" : 2, "user_name" : "egeorge", "password" : "i0X0x4", "gender" : "Female" }, { "id" : 3, "user_name" : "jellis", "password" : "tQWflr38bCS", "gender" : "Female" }, { "id" : 4, "user_name" : "mbutler", "password" : "FuzZU1FX56", "gender" : "Female" } ] <script id="ci-grid-template" type="text/template"> <table> <thead> <tr> <th name="id" >ID</th> <th name="user_name">USER NAME</th> <th name="password">PASSWORD</th> <th name="gender">GENDER</th> </tr> </thead> <tbody> <tr> <td name="id"><a href="#" bind="id"></a></td> <td name="user_name" bind="user_name" ></td> <td name="password" bind="password" ></td> <td name="gender"><input type="text" bind="gender"/></td> </tr> </tbody> </table> </script>
마이크로 템플릿을 이용하여 bind속성을 안쓰고도 데이터를 바인딩 할 수 있습니다. {{key}}를 이용하여 자유롭게 해당 값을 바인딩 할 수 있습니다. 아래예는 a태그의 href속성에 데이터의 homepage값을 세팅하는 예 입니다.
var data = [ { "id" : 1, "user_name" : "areynolds", "password" : "pYhuzU", "gender" : "Male", "homepage" : "www.google.com" }, { "id" : 2, "user_name" : "egeorge", "password" : "i0X0x4", "gender" : "Female", "homepage" : "www.naver.com" }, { "id" : 3, "user_name" : "jellis", "password" : "tQWflr38bCS", "gender" : "Female", "homepage" : "www.daum.com" }, { "id" : 4, "user_name" : "mbutler", "password" : "FuzZU1FX56", "gender" : "Female", "homepage" : "www.nate.com" } ] <script id="ci-grid-template" type="text/template"> <table> <thead> <tr> <th name="id" >ID</th> <th name="user_name">USER NAME</th> <th name="password">PASSWORD</th> <th name="gender">GENDER</th> </tr> </thead> <tbody> <tr> <td name="id"><a href="{{homepage}}" bind="id"></a></td> <td name="user_name" bind="user_name" ></td> <td name="password" bind="password" ></td> <td name="gender"><input type="text" bind="gender"/></td> </tr> </tbody> </table> </script>
다음 예제에서는 데이터에서 homepage값을 바인딩하는데 사용하지 않았습니다. 그래도 전체 데이터는 그리드내 데이터 모델에 세팅 됩니다.
<table id="ci-grid"> </table> <script id="ci-grid-template" type="text/template"> <table> <thead> <tr> <th name="id" >ID</th> <th name="user_name">USER NAME</th> <th name="password">PASSWORD</th> <th name="gender">GENDER</th> </tr> </thead> <tbody> <tr> <td name="id" bind="id"></td> <td name="user_name" bind="user_name" ></td> <td name="password" bind="password" ></td> <td name="gender"><input type="text" bind="gender"/></td> </tr> </tbody> </table> </script> <script> var table = $('#ci-grid'); var template = $('#ci-grid-template'); var grid = webponent.grid.init(table, template); var data = [ { "id" : 1, "user_name" : "areynolds", "password" : "pYhuzU", "gender" : "Male", "homepage" : "www.google.com" }, { "id" : 2, "user_name" : "egeorge", "password" : "i0X0x4", "gender" : "Female", "homepage" : "www.naver.com" }, { "id" : 3, "user_name" : "jellis", "password" : "tQWflr38bCS", "gender" : "Female", "homepage" : "www.daum.com" }, { "id" : 4, "user_name" : "mbutler", "password" : "FuzZU1FX56", "gender" : "Female", "homepage" : "www.nate.com" } ]; grid.appendRow(data); console.log(grid.data[1].homepage); </script>
"www.naver.com"