편집기능

웹포넌트 그리드의 편집기능에 대해 설명합니다.

웹포넌트 그리드는 API를 이용해 셀 NODE와 데이터를 업데이트 시킬 수 있습니다. 또한 UIPlugin을 이용해 사용자가 직접 셀을 클릭, 편집 할 수 있습니다.

1. 초기화

편집기능을 이용하려면 각 로우의 기준이 되는 key를 지정해 줘야 합니다. key지정은 템플릿의 바디부분에 키로 지정하고 싶은 노드에 data-key속성을 적어주면 됩니다.

xml
<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로 잡은것을 확인할 수 있습니다.

2. API

셀 NODE를 업데이트 시킬 수 있는 updateNode()와 데이터를 업데이트 시키는 updateData()를 제공합니다. NODE만 업데이트 시키면 그리드 모델의 변화가 없기때문에 updateNode()를 호출 한 후에는 updateData()를 같이 호출 해 주는것을 원칙으로 합니다.

updateNode

해당키를 가진 로우의 셀들의 마크업을 업데이트 시킵니다.

updateNodejs
/**
 * @param  {String} rowkey 업데이트 시키고 싶은 로우의 키
 * @param  {Map<Node>} nodes  셀의 내용이 담긴 맵
 */
grid.updateNode(rowKey, nodes);
updateNode사용예js
grid.updateNode('alex', {
	password : '<span>my password</span>',
	title : '<p>new title</p>',
	gender : '<img src="gender_male"/>'
});

위의 예제는 로우키가 alex인 로우의 password, title, gender컬럼의 내용을 바꾸는 예제 입니다.

updateData

해당키를 가진 로우의 셀들의 데이터를 업데이트 시킵니다. 특별한 상황이 아니라면 updateNode를 호출 한 후 바로 이어서 호출해 줍니다.

updateDatajs
/**
 * @param  {String} rowkey 업데이트 시키고 싶은 로우의 키
 * @param  {Map} data  셀들의 데이터
 */
grid.updateData(rowKey, data);
updateData사용예js
grid.updateData('alex', {
	password : 'my password',
	title : 'new title',
	gender : 'male'
});

위의 예제는 로우키가 alex인 로우의 password, title, gender컬럼의 데이터를 업데이트 시킵니다.

3. 이벤트

updateData() API가 호출 되면, 그리드에서 이벤트가 발생합니다.

js
 /**
 * @param  {jQuery.event} e     제이쿼리 이벤트 객체
 * @param  {String} rowkey      변경된 셀의 로우키
 * @param  {Map} updatedData    업데이트된 셀키와 데이터값
 * @param  {Map} rowData        업데이트될 셀을 가지는 로우의 전체 데이터
 */
grid.event.on('updated', function (e, rowkey, updatedData, rowData) {

});

4. UI플러그인

사용자에게 직접 셀을 편집 할 수 있는 UX를 제공하려면 UIPlugin을 이용합니다. editable인자를 true로 넘겨주면 자동으로 편집 UI가 생성됩니다.

xml
<script src="your/path/to/webponent.grid.UIplugin.js"></script>
 
webponent.grid.UIplugin.init(grid, {
    editable : true
});

5. 변경된 데이터만 가져오기

응용편으로 변경된 데이터만 가져오는 소스를 첨부합니다. 변경된 데이터들을 user_name을 키로 갖는 QueryString으로 만듭니다. 셀업데이트 API를 유용히 활용하고 있는 예제 입니다.

xml
<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>