RealGrid HELPA29 동적 스타일과 편집 여부 설정
들어가며
1.1.30버전까지는 각 셀의 editable을 동적으로 조작할 수 없어 편법으로 onCurrentChanged(), onCurrentRowChanged()등에서 컬럼의 editable을 조작하는 방법들을 사용하였습니다. 이 경우 코드량이 많이 늘어나 사용하기에 어려운 점이 있었습니다.
1.1.31버전 부터는 동적 스타일(Dynamic Styles)을 적용할 때 같이 editable, readOnly 속성을 지정하여 편집 여부를 설정할 수 있게 되었습니다.
이번 강좌에서는 각 셀들의 editable을 동적으로 조작하는 방법에 대해 배워보도록 하겠습니다.
이론
동적 편집을 사용하는 방법은 기존의 동적 스타일(Dynamic Styles)을 사용하는 방법과 동일 합니다. 스타일 속성에 editable과 readOnly가 추가된 것으로 이해하시면 됩니다.
동적 스타일을 사용하는 방법은 http://help.realgrid.com/api/types/DynamicStyle/ 를 참고하세요.
위의 링크를 확인하셨다면 동적 스타일은 criteria 를 사용하는 방법과 function()을 사용하는 방법 두가지가 있다는 것을 확인할 수 있었을 것입니다.
이 두가지 방법을 사용하여 그리드 전체에 적용되는 동적 스타일과 동적 편집여부는 criteria를 사용해서 적용하고, 각 컬럼에 적용되는 것은 function()을 사용하여 적용해보도록 하겠습니다. (반대의 경우도 가능하니 필요에 맞게 criteria, function()을 선택하여 사용하시면 됩니다.)
실습
-
criteria를 사용하여 그리드 전체에 스타일을 적용해보도록 하겠습니다.
그리드 전체 데이터 중 값이 ‘95’와 ‘가수’인 셀들을 각각 빨간색과 녹색으로 표시하고 편집이 불가능하게 적용해보도록 하겠습니다.$("#btnBodyCellDynamicStyles").click(function () { gridView.setStyles({ body: { cellDynamicStyles: [{ criteria: "value = '95'", styles: { background: "#ffff0000", editable: false } }, { criteria: "value = '가수'", styles: { background: "#ff00ff00", editable: false } }] } }); }); -
스타일이 적용된 셀들을 클릭하여 값이 수정되는지 확인해보세요. 95점이 아닌 점수를 95점으로 수정해보세요. 빨간색으로 변경되고 수정되지 않는것을 확인할 수 있습니다.
-
이번에는 function() 을 사용하여 성별 컬럼에 스타일을 적용해보도록 하겠습니다. 조건은 배우이면서 남자인 데이터만 파란색, 편집 불가로 설정하겠습니다.
$("#btnColumnDynamicStyles").click(function () { var columnDynamicStyles = function(grid, index, value) { var styles = {}; var job = grid.getValue(index.itemIndex, "field1"); if (job == '배우' && value == '남자') { styles.background = "#ff0000ff"; styles.editable = false; } return styles; }; gridView.setColumnProperty("col2", "dynamicStyles", columnDynamicStyles); }); -
3번에서 사용한 setColumnProperty()를 사용하지 않고 처음 컬럼 설정시 바로 설정하셔도 됩니다.
var columns = [ { name: "col1", fieldName: "field1", renderer: { showTooltip: true }, header : { text: "직업" }, width : 60 }, { name: "col2", fieldName: "field2", renderer: { showTooltip: true }, header : { text: "성별" }, width: 50, dynamicStyles: function(grid, index, value) { var styles = {}; var job = grid.getValue(index.itemIndex, "field1"); if (job == '배우' && value == '남자') { styles.background = "#ff0000ff"; styles.editable = false; } return styles; } }, ... 생략 ... ];
실행화면
-
criteria를 사용하여 그리드 전체에 스타일을 적용해보도록 하겠습니다.
그리드 전체 데이터 중 값이 ‘95’와 ‘가수’인 셀들을 각각 빨간색과 녹색으로 표시하고 편집이 불가능하게 적용해보도록 하겠습니다.
-
스타일이 적용된 셀들을 클릭하여 값이 수정되는지 확인해보세요. 95점이 아닌 점수를 95점으로 수정해보세요. 빨간색으로 변경되고 수정되지 않는것을 확인할 수 있습니다.
-
이번에는 function() 을 사용하여 성별 컬럼에 스타일을 적용해보도록 하겠습니다. 조건은 배우이면서 남자인 데이터만 파란색, 편집 불가로 설정하겠습니다.
전체 소스코드
SCRIPT
<script type="text/javascript" src="/script/realgridjs-lic.js"></script>
<script type="text/javascript" src="/script/realgridjs_eval.1.1.31.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.1.31.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,
editable: 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", "95", "95", "100", "80"],
["배우", "남자", "정우성", "100", "100", "95", "70", "95", "100", "80"],
["가수", "남자", "신해철", "100", "95", "90", "70", "100", "100", "80"],
["배우", "여자", "전지현", "95", "100", "90", "70", "95", "100", "80"]
];
dataProvider.setRows(data);
$("#btnBodyCellDynamicStyles").click(function () {
gridView.setStyles({
body: {
cellDynamicStyles: [{
criteria: "value = '95'",
styles: {
background: "#ffff0000",
editable: false
}
}, {
criteria: "value = '가수'",
styles: {
background: "#ff00ff00",
editable: false
}
}]
}
});
});
$("#btnColumnDynamicStyles").click(function () {
var columnDynamicStyles = function(grid, index, value) {
var styles = {};
var job = grid.getValue(index.itemIndex, "field1");
if (job == '배우' && value == '남자') {
styles.background = "#ff0000ff";
styles.editable = false;
}
return styles;
};
gridView.setColumnProperty("col2", "dynamicStyles", columnDynamicStyles);
});
});
</script>
HTML
1. criteria를 사용하여 그리드 전체에 스타일을 적용해보도록 하겠습니다. 그리드 전체 데이터 중 값이 '95'와 '가수'인 셀들을 각각 빨간색과 녹색으로 표시하고 편집이 불가능하게 적용해보도록 하겠습니다. <button type="button" class="btn btn-primary btn-xs" id="btnBodyCellDynamicStyles" > 버튼을 클릭하면 스타일이 적용됨 2. 스타일이 적용된 셀들을 클릭하여 값이 수정되는지 확인해보세요. 3. 이번에는 function() 을 사용하여 성별 컬럼에 스타일을 적용해보도록 하겠습니다. 조건은 배우이면서 남자인 데이터만 파란색, 편집 불가로 설정하겠습니다. <button type="button" class="btn btn-primary btn-xs" id="btnColumnDynamicStyles"> 버튼을 클릭하면 스타일이 적용됨 <div id="realgrid" style="width: 100%; height: 300px;"></div>
참조