RealGrid HELPB8-3 CheckBar 사용하기 III
들어가며
지난 B8-1 CheckBar 사용하기 I 강좌에서는 CheckBar에서 사용되는 기본적인 API 등을 배워보았습니다. 이번 강좌에서는 CheckBar의 체크박스를 컨트롤하는 방법을 배워보겠습니다.
이론
RealGrid는 CheckBar의 체크박스에 체크가능 여부(Checkable)를 다양한 방법으로 지정할 수 있습니다.
리얼그리드에서 제공하는 expression 사용하여 새로 추가된 행들만 체크 가능하게 한다던가, 컬럼의 특정 값이 만족할때만 가능하게 한다던가, 특정조건을 만족할때 등 사용자의 다양한 요구조건을 만족시킬 수 있습니다.
아래에서는 CheckBox의 Checkable과 관련된 API 등을 설명하겠습니다.
Checkable 상태 지정하기
CheckBar에 Checkable 상태를 지정하는 방법은 세 가지가 있습니다. 하나는 GridBase.setCheckBar를 사용하여 CheckBar의 checkableExpression의 속성에 지정하는 방법과 GridBase.setCheckableExpression 함수를 사용하는 방법입니다.
이 두 개의 함수에는 차이점이 있습니다. setCheckBar를 사용하여 checkableExpression에 지정하는 경우는 GridBase.applyCheckables()를 실행하기 전까지는 checkable 상태가 활성화 되지 않습니다. setCheckableExpression()를 실행하는 경우는 checkable 설정과 활성화가 동시에 수행됩니다.
마지막 하나는 원하는 특정 행에 조건없이 checkable상태를 지정하는 것으로 GridBase.setCheckable()](/api/GridBase/setCheckable/) 함수가 있습니다.
Checkable 상태 해제하기
checkable 상태 조작이 더 이상 필요하지 않을때 해제 하는 방법은 GridBase.resetCheckables() 함수를 실행하면 됩니다.
Expression
Checkable 표현 방법은 DynamicStyles에서 사용하는 방법과 같습니다. 예를들어 A 컬럼의 값이 “111”일때 체크 가능하게 하고 싶다고 할때 value[“A”] = “111” 로 표현하면 됩니다. 상태를 조작하기 위한 변수목록은 아래와 같습니다.
value: 데이터행의 각 필드 값을 value[“field name”]나 value[fieldIndex]로 가져옵니다.values: 데이터행의 각 필드 값을 values[“field name”]나 values[fieldIndex]로 가져옵니다.row: 표시 중인 행 아이템의 index 값입니다.dataRow: 표시 중인 행이 참조하는 data provider 행의 row index 값입니다.state: 이 행이 참조하는 데이터 행의 상태 - ‘c’:생성, ‘u’:수정, ‘d’:삭제, ‘x’:생성 후 삭제count: 바로 아래 수준의 자식 행들의 개수를 리턴 합니다.dcount: 모든 자손 행들의 개수를 리턴 합니다.
실습
실습에서는 배우와 가수지만 박정현만 체크 가능하게 해보면서 setCheckBar() + applyCheckables()과 setCheckableExpression()이 어떻게 다르게 동작하는지 확인해 보도록 하겠습니다.
-
버튼을 클릭하면 조건을 설정합니다.
$("#btnSetCheckBar").click(function () { //체커블 설정 gridView.setCheckBar({ checkableExpression: (value['field1'] = '배우') or (value['field3'] = '박정현') }); }); -
위에서 설정한 것을 applyCheckables()을 사용하여 그리드에 적용하기
$("#btnApplyCheckables").click(function () { gridView.applyCheckables(); }); -
resetCheckables()을 사용하여 해제하기
$("#btnResetCheckables").click(function () { gridView.resetCheckables(); }); -
setCheckableExpression()를 사용하여 설정과 적용을 동시에 하기
$("#btnSetCheckableExpression").click(function () { gridView.setCheckableExpression((value['field1'] = '배우') or (value['field3'] = '박정현'), true); }); -
setCheckable()을 사용하여 2행에 체커블 불가상태를 가능하게 적용하기
$("#btnSetCheckable").click(function () { gridView.setCheckable(1, true); });
실행화면
-
그리드에 배우와 박정현만 체크 가능하게 설정하기, 화면상 아무 변화가 없음
-
1번에서 설정한 것을 그리드에 적용한다.
-
화면에 바로 표시된다.
-
체크 불가상태였던 이선희(2행)가 체크 가능하게 바뀐다.
전체 소스코드
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"],
["가수", "남자", "이승환", "5", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "토이", "6", "100", "100", "100", "100", "100", "100"]
];
dataProvider.setRows(data);
gridView.setOptions({
indicator: {zeroBase: true},
stateBar: {visible: false}
});
//체커블 상태 설정
$("#btnSetCheckBar").click(function () {
//체커블 설정
gridView.setCheckBar({
checkableExpression: "(value['field1'] = '배우') or (value['field3'] = '박정현')"
});
});
//체커블 상태 적용
$("#btnApplyCheckables").click(function () {
gridView.applyCheckables();
});
//체커블 상태 해제
$("#btnResetCheckables").click(function () {
gridView.resetCheckables();
});
//체커블 상태 설정 + 적용
$("#btnSetCheckableExpression").click(function () {
gridView.setCheckableExpression("(value['field1'] = '배우') or (value['field3'] = '박정현')", true);
});
//2행만 체커블 가능하게
$("#btnSetCheckable").click(function () {
gridView.setCheckable(1, true);
});
});
</script>
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnSetCheckBar">setCheckBar()을 사용하여 적용하기</button> 그리드에 배우와 박정현만 체크 가능하게 설정하기, 화면상 아무 변화가 없음 2. <button type="button" class="btn btn-primary btn-xs" id="btnApplyCheckables">applyCheckables()사용하여 적용하기</button> 1번에서 설정한 것을 그리드에 적용한다. 3. <button type="button" class="btn btn-primary btn-xs" id="btnResetCheckables">resetCheckables() 사용하여 해제하기</button> 4. <button type="button" class="btn btn-primary btn-xs" id="btnSetCheckableExpression">setCheckableExpression()를 사용하여 설정과 적용을 동시에 하기</button> 화면에 바로 표시된다. 5. <button type="button" class="btn btn-primary btn-xs" id="btnSetCheckable">btnSetCheckable을 사용하여 2행에 체커블 가능하게 하기</button> 체크 불가상태였던 이선희(2행)가 체크 가능하게 바뀐다. <div id="realgrid" style="width: 100%; height: 250px;"></div>
데모 사이트
API 참조