RealGrid HELPC14 값에 따라 특정 컬럼 편집 가능/불가능하게 하기
들어가며
이번 강좌는 기준 컬럼 값에 따라 특정 컬럼들을 편집하거나 편집 불가능하게 하는 것을 배워보도록 하겠습니다.
이론
RealGrid에서는 값에 따라 조건을 주어 스타일을 동적으로 표현할 수 있는 DynamicStyles 기능을 지원하고 있습니다.
그러나 이 DynamicStyles기능은 셀의 스타일만 조작할 수 있고 editable 이나 readOnly 속성을 조작할 수는 없습니다.
이 문제는 onCurrentRowChanged() 콜백함수에서 처리할 수 있습니다. 처리 방법의 개념은 선택된 행이 바뀔때 마다 기준 컬럼(조건)의 값을 바라보고 컬럼들의 editable을 조작하는 것 입니다. 또한 기준 컬럼의 값이 변경 되었을때에는 onCellEdited()에서 editable을 조작하는 하면 됩니다.
처리 방법 요약
- dynamicStyles을 사용하여 수정 가능 여부에 따라 색상을 표시합니다.
- onCurrentRowChanged()에서 조건에 따라 나머지 컬럼들의 editable 속성 값을 설정한다.
- 조건(기준컬럼) 값이 사용자의 수정으로 변경된다면 onCellEdited()에서도 컬럼들의 editable 속성값을 설정합니다.
실습
실습에서는 직업이 가수인 경우 국어, 영어, 수학이 수정가능하고 배우인 경우 국사, 윤리, 과학만 수정가능하게 처리하겠습니다.
-
가수인 경우 국어, 영어, 수학 과목에 적용할 동적 스타일을 생성하여 컬럼에 적용합니다.
var columnStyles_singer = [{ criteria: "values['field1'] = '가수'", styles: "background=#5500ff00" }, { criteria: "values['field1'] = '배우'", styles: "background=#55ff0000" }]; ... var columns = [ ... { name: "column4", fieldName: "field4", header : { text: "국어" }, dynamicStyles: columnStyles_singer, width: 80 }, ... ] -
배우인 경우 국사, 윤리, 과학 과목에 적용할 동적 스타일을 생성하여 컬럼에 적용합니다.
var columnStyles_actor = [{ criteria: "values['field1'] = '가수'", styles: "background=#5500ff00" }, { criteria: "values['field1'] = '배우'", styles: "background=#55ff0000" }]; ... var columns = [ ... { name: "column7", fieldName: "field7", header : { text: "국사" }, dynamicStyles: columnStyles_actor, width: 80 }, ... ] -
화면에는 이미 색상이 적용되어 표시되고 있습니다.
-
각 과목들의 값을 수정해 봅니다. 현재까지는 잘 수정되고 있습니다.
-
버튼을 클릭하면 가수는 국어, 영어, 수학만, 배우는 국사, 윤리, 과학만 수정 가능합니다.
$("#btnOnCurrentRowChanged").click(function () { //editable 설정 gridView.onCurrentRowChanged = function (grid, oldRow, newRow) { if (newRow > -1) { var editable = dataProvider.getValue(newRow, "field1") == "가수" grid.setColumnProperty("column4","editable", editable); grid.setColumnProperty("column5","editable", editable); grid.setColumnProperty("column6","editable", editable); grid.setColumnProperty("column7","editable", !editable); grid.setColumnProperty("column8","editable", !editable); grid.setColumnProperty("column9","editable", !editable); } }; }); -
4행의 가수 박정혀4의 직업을 배우로 수정한 후 국사, 윤리, 과학 과목을 수정해 봅니다. 결과는 수정이 되지 않습니다. 하지만 다른 행을 선택했다가 다시 돌아와서 수정하면 수정이 됩니다.
-
6번에서 문제가 된 점을 onCellEdited() 이벤트를 통해서 수정해보도록 하겠습니다.
$("#btnOnCellEdited").click(function () { //editable 설정 gridView.onCellEdited = function (grid, itemIndex, dataRow, field) { if (dataRow > -1) { if (field == dataProvider.getFieldIndex("field1")) { var editable = grid.getValue(itemIndex, "field1") == "가수" grid.setColumnProperty("column4","editable", editable); grid.setColumnProperty("column5","editable", editable); grid.setColumnProperty("column6","editable", editable); grid.setColumnProperty("column7","editable", !editable); grid.setColumnProperty("column8","editable", !editable); grid.setColumnProperty("column9","editable", !editable); } } }; });
실행화면
-
화면에는 미리 설정한 동적스타일에 따라 색상이 표시되고 있습니다.
-
1행의 각 과목들의 값을 수정해 봅니다. 현재까지는 잘 수정되고 있습니다.
-
버튼을 클릭하고 2행을 선택해 봅니다. 가수라면 국어, 영어, 수학만, 배우라면 국사, 윤리, 과학만 수정 가능합니다.
-
4행의 가수 박정현의 직업을 배우로 수정한 후 국사, 윤리, 과학 과목을 수정해 봅니다. 결과는 수정이 되지 않습니다. 하지만 다른 행을 선택했다가 다시 돌아와서 수정하면 수정이 됩니다. 이유는 우리가 각 컬럼의 editable 속성을 바꾸는 코드를 dataRow가 바뀌었을때만 수행하도록 작성했기 때문입니다. 아래 5번 OnCellEdited() 이벤트를 통해 값이 수정되었을때 바로 설정하도록 코드를 작성하도록 하겠습니다.
-
버튼을 클릭하면 OnCellEdited()가 설정되고 바로 수정 가능/불가능 상태가 설정됩니다.
-
마지막행 전지현의 직업을 가수로 수정하고 각 과목의 점수를 수정하여 바로 반영이 되었는지 확인해보세요.
전체 소스코드
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 columnStyles_actor = [{
criteria: "values['field1'] = '배우'",
styles: "background=#2200ff00"
}, {
criteria: "values['field1'] = '가수'",
styles: "background=#22ff0000"
}];
var columnStyles_singer = [{
criteria: "values['field1'] = '가수'",
styles: "background=#2200ff00"
}, {
criteria: "values['field1'] = '배우'",
styles: "background=#22ff0000"
}];
//필드와 연결된 컬럼 배열 객체를 생성합니다.
var columns = [
{
name: "column1",
fieldName: "field1",
values: ['가수', '배우'],
editor: {
type: "dropDown",
textReadOnly: true
},
header : {
text: "직업"
},
width : 60
},
{
name: "column2",
fieldName: "field2",
editable: false,
header : {
text: "성별"
},
width: 50
},
{
name: "column3",
fieldName: "field3",
editable: false,
header : {
text: "이름"
},
width: 80
},
{
name: "column4",
fieldName: "field4",
header : {
text: "국어"
},
dynamicStyles: columnStyles_singer,
width: 45
},
{
name: "column5",
fieldName: "field5",
header : {
text: "영어"
},
dynamicStyles: columnStyles_singer,
width: 45
},
{
name: "column6",
fieldName: "field6",
header : {
text: "수학"
},
dynamicStyles: columnStyles_singer,
width: 45
},
{
name: "column7",
fieldName: "field7",
header : {
text: "국사"
},
dynamicStyles: columnStyles_actor,
width: 45
},
{
name: "column8",
fieldName: "field8",
header : {
text: "윤리"
},
dynamicStyles: columnStyles_actor,
width: 45
},
{
name: "column9",
fieldName: "field9",
header : {
text: "과학"
},
dynamicStyles: columnStyles_actor,
width: 45
}
];
//컬럼을 GridView에 입력 합니다.
gridView.setColumns(columns);
var data = [
["배우", "여자", "전도연", "20", "22", "90", "70", "60", "100"],
["가수", "여자", "이선희", "40", "33", "90", "70", "60", "100"],
["배우", "여자", "하지원", "10", "11", "90", "70", "60", "100"],
["가수", "여자", "박정현", "40", "22", "90", "70", "60", "100"],
["배우", "여자", "전지현", "20", "44", "90", "70", "60", "100"]
];
dataProvider.setRows(data);
//onCurrentRowChanged()
$("#btnOnCurrentRowChanged").click(function () {
//editable 설정
gridView.onCurrentRowChanged = function (grid, oldRow, newRow) {
if (newRow > -1) {
console.log("onCurrentRowChanged");
var editable = dataProvider.getValue(newRow, "field1") == "가수"
grid.setColumnProperty("column4","editable", editable);
grid.setColumnProperty("column5","editable", editable);
grid.setColumnProperty("column6","editable", editable);
grid.setColumnProperty("column7","editable", !editable);
grid.setColumnProperty("column8","editable", !editable);
grid.setColumnProperty("column9","editable", !editable);
}
};
});
$("#btnOnCellEdited").click(function () {
gridView.onCellEdited = function (grid, itemIndex, dataRow, field) {
if (dataRow > -1) {
if (field == dataProvider.getFieldIndex("field1")) {
var editable = grid.getValue(itemIndex, "field1") == "가수"
grid.setColumnProperty("column4","editable", editable);
grid.setColumnProperty("column5","editable", editable);
grid.setColumnProperty("column6","editable", editable);
grid.setColumnProperty("column7","editable", !editable);
grid.setColumnProperty("column8","editable", !editable);
grid.setColumnProperty("column9","editable", !editable);
}
}
};
});
});
</script>
HTML
1. 화면에는 미리 설정한 동적스타일에 따라 색상이 표시되고 있습니다. 2. 1행의 각 과목들의 값을 수정해 봅니다. 현재까지는 잘 수정되고 있습니다. 3. <button type="button" class="btn btn-primary btn-xs" id="btnOnCurrentRowChanged">onCurrentRowChagned 설정하기</button> 버튼을 클릭하고 2행을 선택해 봅니다. 가수라면 국어, 영어, 수학만, 배우라면 국사, 윤리, 과학만 수정 가능합니다. 4. 4행의 가수 박정현의 직업을 배우로 수정한 후 국사, 윤리, 과학 과목을 수정해 봅니다. 결과는 수정이 되지 않습니다. 하지만 다른 행을 선택했다가 다시 돌아와서 수정하면 수정이 됩니다. 이유는 우리가 각 컬럼의 ediatble 속성을 바꾸는 코드를 dataRow가 바뀌었을때만 수행하도록 작성했기 때문입니다. 아래에서 5번 OnCellEdited() 이벤트를 통해 값이 수정되었을때 바로 설정하도록 코드를 작성하도록 하겠습니다. 5. <button type="button" class="btn btn-primary btn-xs" id="btnOnCellEdited">onCellEdited 설정하기</button> 버튼을 클릭하면 OnCellEdited()가 설정되고 바로 수정 가능/불가능 상태가 설정됩니다. 6. 마지막행 전지현의 직업을 가수로 수정하고 각 과목의 점수를 수정하여 바로 반영이 되었는지 확인해보세요.
관련 데모 페이지
API 참조