웹포넌트 그리드는 API를 이용해 셀 NODE와 데이터를 업데이트 시킬 수 있습니다. 또한 UIPlugin을 이용해 사용자가 직접 셀을 클릭, 편집 할 수 있습니다.
편집기능을 이용하려면 각 로우의 기준이 되는 key를 지정해 줘야 합니다. key지정은 템플릿의 바디부분에 키로 지정하고 싶은 노드에 data-key속성을 적어주면 됩니다.
<table id="grid-table"> </table> <script id="grid-template" type="text/template"> <table width="100%" height="400px"> <thead> <tr> <th name="id" width="70px" align="center">id</th> <th name="user_name" width="150px" align="center">user_name</th> <th name="password" width="150px" align="center">password</th> <th name="gender" width="100px" align="center">gender</th> <th name="race" width="200px">race</th> <th name="title" width="100px" align="center">title</th> <th name="first_name" width="150px">first_name</th> </tr> </thead> <tbody> <tr> <td name="id" bind="id" ></td> //키 지정 <td data-key name="user_name" bind="user_name" ></td> <td name="password" bind="password" ></td> <td name="gender" bind="gender" ></td> <td name="race" bind="race" ></td> <td name="title" bind="title" ></td> <td name="first_name" bind="first_name" ></td> </tr> </tbody> </table> </script> <script> var table = $('#grid-table'); var template = $('#grid-template'); var grid = webponent.grid.init(table, template); </script>
위의 예제에서는 user_name이라는 컬럼을 key로 잡은것을 확인할 수 있습니다.
셀 NODE를 업데이트 시킬 수 있는 updateNode()와 데이터를 업데이트 시키는 updateData()를 제공합니다. NODE만 업데이트 시키면 그리드 모델의 변화가 없기때문에 updateNode()를 호출 한 후에는 updateData()를 같이 호출 해 주는것을 원칙으로 합니다.
해당키를 가진 로우의 셀들의 마크업을 업데이트 시킵니다.
/** * @param {String} rowkey 업데이트 시키고 싶은 로우의 키 * @param {Map<Node>} nodes 셀의 내용이 담긴 맵 */ grid.updateNode(rowKey, nodes);
grid.updateNode('alex', { password : '<span>my password</span>', title : '<p>new title</p>', gender : '<img src="gender_male"/>' });
위의 예제는 로우키가 alex인 로우의 password, title, gender컬럼의 내용을 바꾸는 예제 입니다.
해당키를 가진 로우의 셀들의 데이터를 업데이트 시킵니다. 특별한 상황이 아니라면 updateNode를 호출 한 후 바로 이어서 호출해 줍니다.
/** * @param {String} rowkey 업데이트 시키고 싶은 로우의 키 * @param {Map} data 셀들의 데이터 */ grid.updateData(rowKey, data);
grid.updateData('alex', { password : 'my password', title : 'new title', gender : 'male' });
위의 예제는 로우키가 alex인 로우의 password, title, gender컬럼의 데이터를 업데이트 시킵니다.
updateData() API가 호출 되면, 그리드에서 이벤트가 발생합니다.
/** * @param {jQuery.event} e 제이쿼리 이벤트 객체 * @param {String} rowkey 변경된 셀의 로우키 * @param {Map} updatedData 업데이트된 셀키와 데이터값 * @param {Map} rowData 업데이트될 셀을 가지는 로우의 전체 데이터 */ grid.event.on('updated', function (e, rowkey, updatedData, rowData) { });
사용자에게 직접 셀을 편집 할 수 있는 UX를 제공하려면 UIPlugin을 이용합니다. editable인자를 true로 넘겨주면 자동으로 편집 UI가 생성됩니다.
<script src="your/path/to/webponent.grid.UIplugin.js"></script> webponent.grid.UIplugin.init(grid, { editable : true });
응용편으로 변경된 데이터만 가져오는 소스를 첨부합니다. 변경된 데이터들을 user_name을 키로 갖는 QueryString으로 만듭니다. 셀업데이트 API를 유용히 활용하고 있는 예제 입니다.
<table id="grid-table"> </table> <script id="grid-template" type="text/template"> <table width="100%" height="400px"> <thead> <tr> <th fixed="fixed" name="id" width="70px" align="center">id</th> <th fixed="fixed" name="user_name" width="150px" align="center">user_name</th> <th name="password" width="150px" align="center">password</th> <th name="gender" width="100px" align="center">gender</th> <th name="race" width="200px">race</th> <th name="title" width="100px" align="center">title</th> <th name="first_name" width="150px">first_name</th> </tr> </thead> <tbody> <tr> <td name="id" bind="id" ></td> //키 지정 <td data-key name="user_name" bind="user_name" ></td> <td name="password" bind="password" ></td> <td name="gender" bind="gender" ></td> <td name="race" bind="race" ></td> <td name="title" bind="title" ></td> <td name="first_name" bind="first_name" ></td> </tr> </tbody> </table> </script> <script> var table = $('#grid-table'); var template = $('#grid-template'); var grid = webponent.grid.init(table, template); /** * 그리드 셀이 업데이트될때마다 정보를 담는 맵 * @type {Object} */ var updateList = {}; grid.event.on('updated', function (e, rowkey, updatedData, rowData) { if (updateList[rowkey]) { _.extend(updateList[rowkey], updatedData); } else { var data = {}; data['user_name'] = rowkey; _.extend(data, updatedData); updateList[rowkey] = data; } }); function getUpdatedData () { var queryString = ''; _.each(updateList, function (item, index) { if (index === 0) { queryString += $.param(item); } else { queryString += '&' + $.param(item); } }); return queryString; } </script>