RealGrid HELPB7-3 Update Rows
들어가며
이번 강좌에서는 A23 데이터 편집하기(Editing)에서 배워보았던 행 편집에 대하여 조금 더 자세히 배워보도록 하겠습니다.
이론
행 편집 방법은 두 가지가 있습니다. 그리드에서 직접 입력장치를 통하여 편집하는 방법이 있고. RealGrid에서 제공하는 API를 사용하여 편집하는 방법이 있습니다.
그리드에서 수정을 하고 싶을때에는 수정하고 싶은 위치에서 바로 키보드로 값을 입력하면 바로 편집모드로 들어가고 값이 수정이 됩니다.
값을 수정 안하고 편집 모드로 들어가는 방법은 두 가지가 있습니다. 마우스로 더블클릭 하거나 F2 key를 입력하면 그리드는 편집모드로 들어가면서 편집기가 표시 됩니다.
API를 이용하여 편집 모드로 들어가는 것은 GridView.beginUpdateRow(itemIndex)를 사용하면 됩니다. beginUpdateRow()는 해당 행을 편집 모드로 바꾸기만 하지 편집기가 표시 되지는 않습니다. 편집기까지 표시하고 싶으면 GridBase.showEditor()를 호출해야 합니다.
편집기가 표시되기 전에 ESC key를 누르면 편집모드가 취소됩니다. 편집기가 표시되거나 데이터를 수정 중에 ESC key를 누르면 편집 내용이 취소되고 한번 더 누르면 편집모드가 취소됩니다.
그리드에서 값을 수정하기 위해서는 editOptions()의 속성중 updatable, editable 속성값이 true, readOnly 속성값이 false 로 되어 있어야 수정할 수 있습니다. updatable과 editable의 차이는 editOptions() 에서 확인해 보시기 바랍니다.
그리고, DataColumn의 속성중 editable,readOnly 속성값 또한 각각 true, false 로 되어 있어야합니다.
그리드의 editOptions의 속성을 변경하는 것은 GridBase.setEditOptions()을 통해 가능합니다. 설정 방법을 잘 모르시겠다면 연계 강좌인 A23 데이터 편집하기(Editing)을 다시 한번 학습해보세요.
실습
실습에서는 위에서 언급한 API들을 실행해보면서 기능을 습득하고 LocalDataProvider.onRowUpdating(), LocalDataProvider.onRowUpdated() 이 두 개의 콜백함수가 어느 경우에 발생하는지 확인해보도록 하겠습니다.
-
버튼을 클릭하면 콜백 함수를 설정합니다.
$("#btnSetCallback").click(function () { dataProvider.onRowUpdating = function (provider, row) { var item = gridView.getEditingItem(); // 현재 편집 중인 행 정보와 값을 가져옵니다. if (item) { if (item.values["field3"] == '이승환') { setTimeout(function () { alert('이승환님의 정보는 수정할 수 없습니다.'); }, 0); return false; // false를 리턴하면 DataProvider에 저장되지 않습니다. } } return true; } dataProvider.onRowUpdated = function (provider, row) { alert("onRowUpdated 발생"); } }); -
버튼을 클릭하면 현재 행이 편집 모드로 들어갑니다.
$("#btnBeginUpdateRow").click(function () { var curr = gridView.getCurrent(); gridView.beginUpdateRow(Math.max(0, curr.itemIndex)); gridView.showEditor(); gridView.setFocus(); }); -
버튼을 클릭하면 현재 행에 새로운 행이 추가됩니다.
$("#btnBeginInsertRow").click(function () { var curr = gridView.getCurrent(); gridView.beginInsertRow(Math.max(0, curr.itemIndex)); gridView.showEditor(); gridView.setFocus(); }); -
버튼을 클릭하면 updatable 속성을 false 로 설정합니다.
$("#btnSetUpdatable").click(function () { gridView.setEditOptions({updatable: false}); });
실행화면
-
버튼을 클릭하면 콜백 함수를 설정합니다. 화면에는 아무 변화가 없습니다.
-
버튼을 클릭하면 현재 행이 편집모드로 들어갑니다. 값을 입력해보고 1번에서 설정한 콜백함수가 언제 실행되는지 확인해 봅니다.
-
버튼을 클릭하면 현재 행에 새로운 행이 추가 됩니다. 값을 입력해 봅니다.
-
이승환의 점수 정보를 수정해보고 어떤 메시지가 나오는지 확인해보시기 바랍니다.
-
이승환이 아닌 다른 사람의 점수 정보를 수정해보고 어떤 메시지가 나오는지 확인해보시기 바랍니다.
-
버튼을 클릭하면 updatable 속성을 false로 설정합니다.
-
2번 버튼을 다시 클릭하여 동작이 어떻게 다른지 확인해보세요.
-
3번 버튼을 다시 클릭하여 동작이 어떻게 다른지 확인해보세요.
전체 소스코드
SCRIPT
<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.112.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 = [
["배우", "여자", "전도연", "0", "70", "90", "70", "60", "100", "80"],
["가수", "여자", "이선희", "1", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "하지원", "2", "100", "90", "70", "60", "100", "80"],
["가수", "여자", "박정현", "3", "90", "90", "70", "60", "100", "80"],
["배우", "여자", "전지현", "4", "100", "90", "70", "60", "100", "80"],
["가수", "남자", "이승환", "7", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "신해철", "8", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "타블로", "9", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "토이", "10", "100", "100", "100", "100", "100", "100"]
];
dataProvider.setRows(data);
gridView.setOptions({
indicator: {visible: true},
checkBar: {visible: false},
stateBar: {visible: true},
edit: {insertable: true, appendable: true, updatable: true, editable: true}
});
//버튼을 클릭하면 콜백 함수를 설정합니다. 이승환의 정보는 수정할 수 없습니다.
$("#btnSetCallback").click(function () {
dataProvider.onRowUpdating = function (provider, row) {
var item = gridView.getEditingItem(); // 현재 편집 중인 행 정보와 값을 가져옵니다.
if (item) {
if (item.values["field3"] == '이승환') {
setTimeout(function () { alert('이승환님의 정보는 수정할 수 없습니다.'); }, 0);
return false; // false를 리턴하면 DataProvider에 저장되지 않습니다.
}
}
return true;
}
dataProvider.onRowUpdated = function (provider, row) {
alert("onRowUpdated 발생");
}
});
//버튼을 클릭하면 현재 행이 편집 모드로 들어갑니다.
$("#btnBeginUpdateRow").click(function () {
var curr = gridView.getCurrent();
gridView.beginUpdateRow(Math.max(0, curr.itemIndex));
gridView.showEditor();
gridView.setFocus();
});
//버튼을 클릭하면 현재 행에 새로운 행이 추가됩니다.
$("#btnBeginInsertRow").click(function () {
var curr = gridView.getCurrent();
gridView.beginInsertRow(Math.max(0, curr.itemIndex));
gridView.showEditor();
gridView.setFocus();
});
//버튼을 클릭하면 updatable 속성을 false 로 설정합니다.
$("#btnSetUpdatable").click(function () {
gridView.setEditOptions({updatable: false});
});
});
</script>
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnSetCallback">SetCallback</button> 버튼을 클릭하면 콜백 함수를 설정합니다. 화면에는 아무 변화가 없습니다.
2. <button type="button" class="btn btn-primary btn-xs" id="btnBeginUpdateRow">beginUpdateRow()</button> 버튼을 클릭하면 현재 행이 편집모드로 들어갑니다. 값을 입력해보고 1번에서 설정한 콜백함수가 언제 실행되는지 확인해 봅니다.
3. <button type="button" class="btn btn-primary btn-xs" id="btnBeginInsertRow">beginInsertRow()</button> 버튼을 클릭하면 현재 행에 새로운 행이 추가 됩니다. 값을 입력해 봅니다.
4. 이승환의 점수 정보를 수정해보고 어떤 메시지가 나오는지 확인해보시기 바랍니다.
5. 이승환이 아닌 다른 사람의 점수 정보를 수정해보고 어떤 메시지가 나오는지 확인해보시기 바랍니다.
6. <button type="button" class="btn btn-primary btn-xs" id="btnSetUpdatable">setEditOptions({updatable: false});</button> 버튼을 클릭하면 updatable 속성을 false로 설정합니다.
7. 2번 버튼을 다시 클릭하여 동작이 어떻게 다른지 확인해보세요.
8. 3번 버튼을 다시 클릭하여 동작이 어떻게 다른지 확인해보세요.
<div id="realgrid" style="width: 100%; height: 250px;"></div>
튜토리얼 참조
데모 사이트
API 참조