AX5UI - GRID 3 (Row 와 Column 다루기)

이번에는 AX5UI 그리드에서 행과 열을 추가, 수정, 삭제 하는 방법을 알아 봅니다. "AX5UI - GRID 1 (기본 사용법)" 에서 사용된 예제에 기능을 추가해서 테스트 했습니다.

 

다음 내용들이 테스트 소스에 수정 및 추가된 내용들 입니다.

 

행을 추가하는 addRow 메소드 실행시 오류가 #31 번 패치로 수정되었는데, ax5ui-kernel에는 아직 반영되지 않은것 같습니다. ax5grid.min.js 를 직접 사용합니다. 이때는 ax5core.min.js도 함께 포함해야 합니다.

 

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.min.js"></script>

 

버튼을 추가합니다.

 

<div style="padding: 10px;">
	<button class="btn btn-default" data-grid-control="row-add">행 추가</button>
	<button class="btn btn-default" data-grid-control="row-remove">행 삭제</button>
	<button class="btn btn-default" data-grid-control="row-update">행 업데이트</button>
</div>

<div style="padding: 10px;">
	<button class="btn btn-default" data-grid-control="column-add">열 추가</button>
	<button class="btn btn-default" data-grid-control="column-remove">열 삭제</button>
	<button class="btn btn-default" data-grid-control="column-update">열 수정</button>
</div>

 

이벤트 핸들러를 추가합니다.

 

<script type="text/javascript">
$(document).ready(function () {
	/* 버튼 이벤트 핸들러 */
	$('[data-grid-control]').click(function () {
		switch (this.getAttribute("data-grid-control")) {
			case "row-add":
				firstGrid.addRow($.extend({}, firstGrid.list[Math.floor(Math.random() * firstGrid.list.length)], {__index: undefined}));
				break;
			case "row-remove":
				firstGrid.removeRow();
				break;
			case "row-update":
				var updateIndex = Math.floor(Math.random() * firstGrid.list.length);
				firstGrid.updateRow($.extend({}, firstGrid.list[updateIndex], {price: 100, amount: 100, cost: 10000}), updateIndex);
				break;
			case "column-add":
				firstGrid.addColumn({key: "b", label: "필드B"});
				break;
			case "column-remove":
				firstGrid.removeColumn();
				break;
			case "column-update":
				firstGrid.updateColumn({key: "b", label: "필드B"}, 0);
				break;
		}
	});
});
</script>

 

실행화면입니다.

 

 

 

1. 행 추가

 

행의 추가는 그리드의 addRow 메소드를 사용합니다.

 

 

ax5grid.addRow(_row, [_dindex], [_options]) Param              Type                 Default   Description -------------------------------------------------------------------------- _row                Object [_dindex]          Number | String  last [_options]         Object                            options of addRow [_options.sort]   Boolean                          sortData

 

- 첫 번째 인자로 행 객체를 입력합니다. 필수 입력 입니다.

- 두 번째 인자로 행이 들어갈 위치를 지정합니다. 옵션 값으로 기본값은 "last" 입니다. 문자열 과 숫자를 사용할 수 있는데, 문자열은 "first"와 "last"를 사용할 수 있습니다. 각각 그리드의 처음과 마지막에 행을 추가합니다. 숫자를 사용하면 0부터 시작하는 숫자값을 사용할 수 있으며, 0 이 그리드의 처음에 행을 삽입하게 됩니다.

- _options 객체는 _options.sort 값이 true 이면 데이터를 정렬하는 것 같습니다.

 

위 예제에서 행을 추가하는 코드 입니다. 기존의 그리에 있던 행중의 하나를 랜덤으로 가져와서 다시 입력합니다.

 

firstGrid.addRow($.extend({}, firstGrid.list[Math.floor(Math.random() * firstGrid.list.length)], {__index: undefined}));

 

 

2. 행의 삭제

 

행의 삭제는 removeRow() 메소드로 작업합니다. 삭제 인덱스는 0부터 시작합니다.

 

- 사용예

 

firstGrid.removeRow();         // 마지막 라인을 삭제합니다. firstGrid.removeRow("first"); // 첫 번째 라인을 삭제합니다. firstGrid.removeRow("last");  // 마지막 라인을 삭제합니다. firstGrid.removeRow(1);       // 두 번째 라인을 삭제합니다.

 

 

3. 행의 수정

 

- 위 예에서 랜덤하게 하나의 행을 가져와서 주유량(amount), 주행거리(mileage), 금액(price) 을 수정합니다.

 

var updateIndex = Math.floor(Math.random() * firstGrid.list.length); firstGrid.updateRow($.extend({}, firstGrid.list[updateIndex], {amount: 30, mileage: 1230, price: 25000}), updateIndex);

 

 

4. 열 추가

 

ax5grid.addColumn(_column, [_cindex])

 

- 첫번째 인라는 컬럼 객체로 필수 입력 입니다.

- 두 번째 인자는 옵션으로 문자열로 "first", "last" 또는 숫자로 위치를 지정할 수 있습니다. 현재 숫자로 위치를 지정하는 것은 동작하고 있지 않은것 같습니다.

 

- 사용예

 

firstGrid.addColumn({key: "b", label: "필드B"});

 

 

5. 열 삭제

 

ax5grid.removeColumn([_cindex])

 

- 인자가 없으면 기본값으로 마지막 라인을 삭제 합니다. 인자를 입력해 원하는 라인을 삭제할 수 있습니다.

 

- 사용예

firstGrid.removeColumn();

 

 

6. 열 수정

 

ax5grid.updateColumn(_column, _cindex)

 

- 첫 번째 인자는 열 객체로 필수 입니다.

- 두 번째 인자는 열의 위치로 옵션 입니다. 기본값은 "last"입니다.

 

firstGrid.updateColumn({key: "b", label: "필드B"}, 0);

 

API 문서에 메소드와 인자에 대한 설명이 없어서 샘플을 이러저러 테스트 해보기가 좀 어려웠습니다. API 문서가 좀 더 보강이 된다면 더욱 편리하게 사용할 수 있을 것 같습니다.

 

 

※ 참고

 

$.extend(target [, object1 ] [, objectN ]); or jQuery.extend(target [, object1 ] [, objectN ]);

 

- 두 개 이상의 객체의 내용을 첫 번째 객체로 병합합니다. 두 개 이상의 개체 인수가 제공되면 $.extend()는 모든 개체의 속성이 target 개체에 추가합니다. 인수가  null 이거나 undefined 이면 무시 됩니다.

 

인수가 하나만 제공된 경우 이는 target 인수가 생략되었음을 의미합니다. 이 경우 jQuery 객체 자체가 target으로 간주 됩니다. 이렇게 하면 jQuery 네임 스페이스에 새로운 함수를 추가 할 수 있습니다. 이것은 JQuery에 새로운 메소드를 추가하고자 하는 플러그인 작성자에게 유용 할 수 있습니다.

 

$.extend(); 의 실행 결과 target 객체의 내용이 수정되어 반환됩니다. 그러나 원본 객체를 유지하려면 빈 객체를 target 으로 전달하면 됩니다.

 

var object = $.extend({}, object1, object2);

 

$.extend()에 의해 수행되는 병합은 기본적으로 재귀적으로 수행되지 않습니다. 첫 번째 객체의 속성이 객체 또는 배열인 경우 두 번째 또는 후속 객체에서 동일한 키가 있는 속성이 있다면 그것으로 완전히 덮어 쓰여집니다. 값은 병합되지 않습니다. 그러나 함수의 첫 번째 인수로 true 를 전달하면 개체가 재귀 적으로 병합됩니다.

 

 

※ 전체소스

grid_row_n_column.zip

다운로드