RealGrid HELPC23 계산 필드
들어가며
이번 강좌에서는 계산 필드에 대해 배워보도록 하겠습니다.
이론
계산 필드는 다른 필드들의 값을 참조하여 연산을 통해 값을 보여줄 수 있는 필드 입니다.
간단한 사칙연산은 필드의 calculateExpression 속성에 하고, 복잡한 연산의 경우는 calculateCallback 속성에 설정 합니다.
연산에 소요되는 시간이 많은 경우 그리드의 표시 속도가 느려지므로 적절한 연산시간을 소요할 수 있도록 해야 합니다.
너무 많은 시간이 소요되는 경우 그리드가 아닌 DB등에서 연산 후 표시하는 방법으로 사용하셔야 할 것 입니다.
계산 필드는 앞쪽에 위치한 필드만 참조할 수 있습니다. 계산 필드 구현시 주의하시기 바랍니다.
또한 컬럼이 아닌 필드이기 때문에 dataProvider에 값이 반영(commit())되기 전까지는 계산필드의 값이 계산되지 않습니다.
실습에서는 필드와 계산 필드를 설정해 보고 어떻게 동작하는지 확인해보도록 하겠습니다.
실습
필드 설정을 해보도록 하겠습니다.
-
field1, field2 는 값을 참조할 raw데이터가 들어 있는 필드이며 field3, field4 는 계산 필드 입니다. (field3는 field1 + field2, field4는 field1 * field2 로 처리한 것을 확인할 수 있습니다.)
var fields = [ { fieldName: "field1", dataType: "number" }, { fieldName: "field2", dataType: "number" }, { fieldName: "field3", dataType: "number", calculateExpression: "values['field1'] + values['field2']" }, { fieldName: "field4", dataType: "number", calculateCallback: function (dataRow, fieldName, fieldNames, values) { var field1Value = values[fieldNames.indexOf("field1")]; var field2Value = values[fieldNames.indexOf("field2")]; return field1Value * field2Value; } } ]; dataProvider.setFields(fields);
컬럼을 설정해보도록 하겠습니다.
-
데이터 프로바이더에 설정한 필드들을 컬럼에 연결해 줍니다.
var columns = [ { name: "col1", fieldName: "field1", header : { text: "숫자1" }, width : 100, editor: { type: "number" }, styles: { numberFormat: "#,##0" } }, { name: "col2", fieldName: "field2", header : { text: "숫자2" }, width : 100, editor: { type: "number" }, styles: { numberFormat: "#,##0" } }, { name: "col3", fieldName: "field3", header : { text: "숫자1+숫자2" }, width : 100, editor: { type: "number" }, styles: { numberFormat: "#,##0" } }, { name: "col4", fieldName: "field4", header : { text: "숫자1*숫자2" }, width : 100, editor: { type: "number" }, styles: { numberFormat: "#,##0" } } ]; //컬럼을 GridView에 입력 합니다. gridView.setColumns(columns); -
3, 4번째 컬럼의 값이 맞게 계산되어 표시되는지 확인 합니다.
-
1행의 1, 2번 컬럼의 값을 임의의 값으로 수정해보세요(commit되지 않았기 때문에 3, 4번 컬럼의 값이 바뀌지 않습니다.)
-
행 commit이 발생해야 3, 4번째 컬럼의 값이 변경됩니다.
-
해당 문제를 해결하기 위해 셀의 값이 수정되면 발생하는 onCellEdited() 이벤트 안에서 commit() 처리를 하도록 하겠습니다.
gridView.onCellEdited = function (grid, itemIndex, dataRow, field) { grid.commit(); }; -
1, 2번째 컬럼의 값을 수정하면 바로 3, 4컬럼의 값이 계산되어 표시 됩니다.
실행화면
-
화면에는 필드 및 컬럼 설정이 완료되어 표시되고 있습니다.
-
3, 4번째 컬럼의 값이 맞게 계산되어 표시되는지 확인 합니다.
-
1행의 1, 2번 컬럼의 값을 임의의 값으로 수정해보세요(commit되지 않았기 때문에 3, 4번 컬럼의 값이 바뀌지 않습니다.)
-
행 commit이 발생해야 3, 4번째 컬럼의 값이 변경됩니다.
-
1, 2번째 컬럼의 값을 수정하면 바로 3, 4컬럼의 값이 계산되어 표시 됩니다.
전체 소스코드
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.1.27.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.1.27.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);
gridView.setEditOptions({
insertable: true
});
//필드 배열 객체를 생성합니다.
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",
renderer: {
showTooltip: true
},
header : {
text: "직업"
},
width : 60
},
{
name: "col2",
fieldName: "field2",
renderer: {
showTooltip: true
},
header : {
text: "성별"
},
width: 50
},
{
name: "col3",
fieldName: "field3",
renderer: {
showTooltip: true
},
header : {
text: "이름"
},
width: 80
},
{
name: "col4",
fieldName: "field4",
renderer: {
showTooltip: true
},
header : {
text: "국어"
},
width: 80
},
{
name: "col5",
fieldName: "field5",
renderer: {
showTooltip: true
},
header : {
text: "수학"
},
width: 80
},
{
name: "col6",
fieldName: "field6",
renderer: {
showTooltip: true
},
header : {
text: "민법"
},
width: 80
},
{
name: "col7",
fieldName: "field7",
renderer: {
showTooltip: true
},
header : {
text: "한국사"
},
width: 80
},
{
name: "col8",
fieldName: "field8",
renderer: {
showTooltip: true
},
header : {
text: "영어"
},
width: 80
},
{
name: "col9",
fieldName: "field9",
renderer: {
showTooltip: true
},
header : {
text: "과학"
},
width: 80
},
{
name: "col10",
fieldName: "field10",
renderer: {
showTooltip: true
},
header : {
text: "사회"
},
width: 80
}
];
//컬럼을 GridView에 입력 합니다.
gridView.setColumns(columns);
var data = [
["배우", "여자", "전도연", "100", "100", "90", "70", "95", "100", "80"],
["가수", "여자", "이선희", "100", "100", "90", "70", "95", "100", "80"],
["배우", "여자", "하지원", "100", "100", "90", "70", "95", "100", "80"],
["가수", "여자", "박정현", "100", "100", "90", "70", "95", "100", "80"],
["배우", "여자", "전지현", "100", "100", "90", "70", "95", "100", "80"]
];
dataProvider.setRows(data);
//소트
$("#btnOrderBy").click(function () {
gridView.orderBy(["field3"],["ascending"])
});
$("#btnInsertRow0").click(function () {
dataProvider.insertRow(4, []); //전지현의 dataRow 4 위에 삽입..
});
$("#btnInsertRow1").click(function () {
gridView.beginInsertRow(3);
});
$("#btnSetOptions").click(function () {
gridView.orderBy([],[]);
var data = [
["배우", "여자", "전도연", "100", "100", "90", "70", "95", "100", "80"],
["가수", "여자", "이선희", "100", "100", "90", "70", "95", "100", "80"],
["배우", "여자", "하지원", "100", "100", "90", "70", "95", "100", "80"],
["가수", "여자", "박정현", "100", "100", "90", "70", "95", "100", "80"],
["배우", "여자", "전지현", "100", "100", "90", "70", "95", "100", "80"]
];
dataProvider.setRows(data);
//sortMode, filterMode 설정
gridView.setOptions({
sortMode: "explicit",
filterMode: "explicit"
})
});
$("#btnInsertRow2").click(function () {
gridView.beginInsertRow(1, true);
});
});
</script>
HTML
1. 화면에는 필드 및 컬럼 설정이 완료되어 표시되고 있습니다. 2. 3, 4번째 컬럼의 값이 맞게 계산되어 표시되는지 확인 합니다. 3. 1행의 1, 2번 컬럼의 값을 임의의 값으로 수정해보세요(commit되지 않았기 때문에 3, 4번 컬럼의 값이 바뀌지 않습니다.) 4. 행 commit이 발생해야 3, 4번째 컬럼의 값이 변경됩니다. 5. <button type="button" class="btn btn-primary btn-xs" id="btnOnCellEdited">버튼을 클릭하면 onCellEdited()에서 commit()을 처리합니다. 6. 1, 2번째 컬럼의 값을 수정하면 바로 3, 4컬럼의 값이 계산되어 표시 됩니다. <div id="realgrid" style="width: 100%; height: 300px;"></div>
참조