RealGrid HELPA23 데이터 편집하기(Editing)
들어가며
이번 강좌에서는 RealGrid의 강력한 편집기능에 대해 알아보겠습니다. 편집기능을 하나의 강좌에서 다루기에는 너무 많은 내용이지만 요약하여 기본적인 내용만 배워보도록 하겠습니다.
이론
RealGrid에서 편집은 Data와 Item으로 구분해서 생각해볼 필요가 있습니다. Data와 Item에 대한 기본적인 이해는 [A11 강좌]에서 배울 수 있습니다.
편집상태
RealGrid는 그리드에서 직접 키보드등 입력장치를 통해 데이터를 편집 할 수 있습니다. 데이터가 표시된 그리드의 셀(Cell)위에서 문자나 숫자 키를 입력하면 그리드는 즉시 편집모드로 들어갑니다. 이때 해당 행의 상태는 편집상태(Editing)가 되며 인디케이터(Indicator)에는 편집상태를 알리는 아이콘이 표시됩니다. 일반적으로 편집상태는 아래 화면과 같습니다.
Commit
행이 편집상태일때 셀(Cell)의 값은 Data의 값이 아닌 Item의 값입니다. Item의 값은 Data에 즉시 전달되지 않고 Commit이라는 명령에 의해 DataProvider에 반영하게 됩니다.
아래 그림은 변경된 Item의 값이 Commit명령에 의해 Data에 반영되는 과정을 표현한 것입니다.
Commit명령은 GridBase.Commit()함수로 실행되거나 행이 변경될때 자동으로 실행됩니다.
행의 상태(RowState)
그리드에서 편집에 해당하는 기능은 일반적으로 추가, 수정, 삭제가 있습니다. RealGrid는 기능에 따라 행의 상태(RowState)가 달라지고 행의 상태는 상태바(StateBar)에 아이콘으로 표시됩니다.
아래 표에는 기능별 상태와 상태바의 아이콘이 어떻게 달라지는지 그 차이를 나타내고 있습니다.
| 기능 | 키보드 동작 | API | 상태(RowState) | 상태바 아이콘 |
|---|---|---|---|---|
| 조회 | none | |||
| 행 삽입(Insert) | INSERT |
beginInsertRow() | created |  |
| 행 추가(Append) | 마지막행에서 ↓ |
beginAppendRow() | created | |
| 행 수정(Update) | F2 또는 값변경 |
beginUpdateRow() | updated |  |
| 행 삭제(Delete) | CTRL+DELETE |
deleteSelection() | deleted |  |
| 행 삽입 또는 추가 후 삭제 | INSERT 후 CTRL+DELETE |
createAndDeleted |  |
- 위 API는 모두 GridView클래스의 메서드 입니다.
- 행 삽입(Insert)은 현재 선택된 행의 바로 위에 새로운 행이 추가됩니다.
- 행 추가(Append)는 맨 마지막행의 바로 아래에 새로운 행이 추가됩니다.
실습을 통해 각 기능의 작동 방법과 기능에 따라 상태가 어떻게 달라지는지 확인해보겠습니다.
실습
-
행의 추가, 삽입, 삭제가 가능하도록 EditOptions의 insertable속성과 appendable, deletable속성을 true로 수정합니다.
//행 삽입과 행 추가, 행 삭제가 가능하도록 옵션 조정 gridView.setEditOptions({ insertable: true, appendable: true, deletable: true }) -
버튼 클릭시 행 삽입, 행 추가, 행 삭제 기능을 수행하는 코드작성
// 현재행 위해 새로운 행 추가위해 beginInserRow()함수 실행 $("#btnInsert").click( function() { var current = gridView.getCurrent(); gridView.beginInsertRow(current.itemIndex); }) // 맨 마지막 행 추가위해 beginAppendRow()함수 실행 $("#btnAppend").click(function() { gridView.beginAppendRow(); }) // 선택된 행 삭제를 위해 deleteSelection()함수 실행 $("#btnDelete").click(function() { gridView.deleteSelection(); }) -
버튼을 클릭하면 현재 그리드의 상태별 RowId정보를 가져와서 alert하는 코드 작성
$("#btnGetStateRows").click(function() { var rowStates = { "created": dataProvider.getStateRows("created"), "updated": dataProvider.getStateRows("updated"), "deleted": dataProvider.getStateRows("deleted"), "createAndDeleted": dataProvider.getStateRows("createAndDeleted"), "none": dataProvider.getStateRows("none") }; alert(JSON.stringify(rowStates)); })
실행화면
- 버튼을 눌러 현재행에 새로운 행이 추가되는 것을 확인하세요. 추가된 행에 값을 입력하고 행을 변경하여 행의 상태가
created되는 것을 확인하세요. - 버튼을 눌러 마지막행에 새로운 행이 추가되는 것을 확인하세요. 추가된 행에 값을 입력하고 행을 변경하여 행의 상태가
created되는 것을 확인하세요. - 버튼을 눌러 현재 선택된 행의 상태가
deleted되는 것을 확인하세요. - 특정행의 값을 수정한 다음 행을 변경하여 행의 상태가
updated되는 것을 확인하세요. - 버튼을 눌러 그리드의 행 상태별 정보를 alert합니다.
전체 소스코드
SCRIPT
<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/script/bootstrap.min.js"></script>
<!--realgrid-->
<script type="text/javascript" src="/script/realgridjs-lic.js"></script>
<script type="text/javascript" src="/script/realgridjs_eval.1.0.14.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.0.14.js"></script>
<script>
var gridView;
var dataProvider;
$(document).ready( function() {
RealGridJS.setTrace(false);
RealGridJS.setRootContext("/script");
dataProvider = new RealGridJS.LocalDataProvider();
gridView = new RealGridJS.GridView("realgrid");
gridView.setDataSource(dataProvider);
//다섯개의 필드를 가진 배열 객체를 생성합니다.
var fields = [
{
fieldName: "field1"
},
{
fieldName: "field2"
},
{
fieldName: "field3"
},
{
fieldName: "field4"
},
{
fieldName: "field5"
},
{
fieldName: "field6"
},
{
fieldName: "field7"
},
{
fieldName: "field8"
},
{
fieldName: "field9"
},
{
fieldName: "field10"
}
];
//DataProvider의 setFields함수로 필드를 입력합니다.
dataProvider.setFields(fields);
//필드와 연결된 컬럼 배열 객체를 생성합니다.
var columns = [
{
name: "col1",
fieldName: "field1",
header : {
text: "직업"
},
width : 60
},
{
name: "col2",
fieldName: "field2",
header : {
text: "성별"
},
width: 50
},
{
name: "col3",
fieldName: "field3",
header : {
text: "이름"
},
width: 80
},
{
name: "col4",
fieldName: "field4",
header : {
text: "국어"
},
width: 80
},
{
name: "col5",
fieldName: "field5",
header : {
text: "수학"
},
width: 80
},
{
name: "col6",
fieldName: "field6",
header : {
text: "민법"
},
width: 80
},
{
name: "col7",
fieldName: "field7",
header : {
text: "한국사"
},
width: 80
},
{
name: "col8",
fieldName: "field8",
header : {
text: "영어"
},
width: 80
},
{
name: "col9",
fieldName: "field9",
header : {
text: "과학"
},
width: 80
},
{
name: "col10",
fieldName: "field10",
header : {
text: "사회"
},
width: 80
}
];
//컬럼을 GridView에 입력 합니다.
gridView.setColumns(columns);
var data = [
["가수", "여자", "정수라", "80", "99", "90", "90", "100", "100", "90"],
["배우", "여자", "송윤아", "10", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "전도연", "20", "22", "90", "70", "60", "100", "80"],
["가수", "여자", "이선희", "40", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "하지원", "10", "11", "90", "70", "60", "100", "80"],
["가수", "여자", "소찬휘", "30", "55", "90", "70", "60", "100", "80"],
["가수", "여자", "박정현", "40", "22", "90", "70", "60", "100", "80"],
["배우", "여자", "전지현", "20", "44", "90", "70", "60", "100", "80"]
];
dataProvider.setRows(data);
//행 삽입과 행 추가, 행 삭제가 가능하도록 옵션 조정
gridView.setEditOptions({
insertable: true,
appendable: true,
deletable: true
})
//데이터를 바로 삭제하지 않고 상태만 변경
dataProvider.setOptions({
softDeleting: true
})
// 현재행 위해 새로운 행 추가위해 beginInserRow()함수 실행
$("#btnInsert").click( function() {
var current = gridView.getCurrent();
gridView.beginInsertRow(current.itemIndex);
})
// 맨 마지막 행 추가위해 beginAppendRow()함수 실행
$("#btnAppend").click(function() {
gridView.beginAppendRow();
})
// 선택된 행 삭제를 위해 deleteSelection()함수 실행
$("#btnDelete").click(function() {
gridView.deleteSelection();
})
$("#btnGetStateRows").click(function() {
var rowStates = {
"created": dataProvider.getStateRows("created"),
"updated": dataProvider.getStateRows("updated"),
"deleted": dataProvider.getStateRows("deleted"),
"createAndDeleted": dataProvider.getStateRows("createAndDeleted"),
"none": dataProvider.getStateRows("none")
};
alert(JSON.stringify(rowStates));
})
});
</script>
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnInsert">Insert</button> 버튼을 눌러 현재행에 새로운 행이 추가되는 것을 확인하세요. 추가된 행에 값을 입력하고 행을 변경하여 행의 상태가 `created`되는 것을 확인하세요. 2. <button type="button" class="btn btn-primary btn-xs" id="btnAppend">Append</button> 버튼을 눌러 마지막행에 새로운 행이 추가되는 것을 확인하세요. 추가된 행에 값을 입력하고 행을 변경하여 행의 상태가 `created`되는 것을 확인하세요. 3. <button type="button" class="btn btn-primary btn-xs" id="btnDelete">Delete</button> 버튼을 눌러 현재 선택된 행의 상태가 `deleted`되는 것을 확인하세요. 4. 특정행의 값을 수정한 다음 행을 변경하여 행의 상태가 `updated`되는 것을 확인하세요. 5. <button type="button" class="btn btn-primary btn-xs" id="btnGetStateRows"> 행 상태가 created인 행의 배열 가져오기</button> 버튼을 눌러 그리드의 행 상태별 정보를 alert합니다. <div id="realgrid" style="width: 100%; height: 300px;"></div>
튜토리얼 참조
관련 데모 페이지
API 참조