SMART datagrid v1.4 > Examples
그리드 각 DataColumn들은 DataSet의 한 필드에 연결돼서 그 값을 표시하거나 수정하는데, 계산 컬럼을 이용하면 데이터셋 필드에 직접 연결하지 않고 그리드 컬럼을 구성할 수 있다.
계산 컬럼에 포함된 데이터셀들에 표시되는 값들은 valueExpression이나 valueCallback에 지정된 설정으로 매번 계산되는데, cached 속성을 true로 지정하면 한 번 계산된 값을 보관해서 표시 성능을 올릴 수 있다. 아래 그리드에서 "합계2" 컬럼의 cached가 true로 설정됐다.
var columns = [
...
{
"name": "Amount",
"type": "calced", // 계산 컬럼
"valueType": "number", // 자료형
"valueExpression": "unit_price * quantity",
}, {
"name": "Amount2",
"type": "calced",
"valueType": "number",
"valueCallback": function (column, row) {
return row.getValue('unit_price') * row.getValue('quantity');
},
"cached": true,
}, ...
]
컬럼 설정에서 계산 컬럼은 "type"을 "calced"로 지정하고, valueExpression이나 valueCallback로 표시될 값을 지정한다. 또, valueType을 지정해서 계산된 값의 자료형을 설정해야 한다. 설정하지 않으면 NUMBER로 설정된다.
계산 컬럼에 표시되는 값들은 임시적인 값이므로 이 컬럼을 기준으로 그룹핑을 할 수 없고, 기본적으로는 Footer 등에 합계를 표시할 수도 없다. 굳이 합계를 표시해야 하는 경우라면 ValueColumn.summaryCallback을 이용한다. 위 그리드에서 "합계2" 컬럼에서 summaryCallback이 설정됐다.
"footer": {
"summaryCallback": function (column) {
var grid = column.grid();
var fld = grid.dataSource().getFieldIndex('quantity');
var fld2 = grid.dataSource().getFieldIndex('unit_price');
var v = 0;
for (var i = grid.rowCount(); i--;) {
v += grid.getValueAt(i, fld) * grid.getValueAt(i, fld2);
}
return v;
},
"styles": {
"numberFormat": "#,##0.00",
}
}