RealGrid HELPB8-1 CheckBar 사용하기 I
들어가며
이번 강좌에서는 RealGrid에서 CheckBar를 사용하는 기본적인 방법을 배워보겠습니다.
이론
CheckBar는 그리드의 특정 행을 선택하기 위해 사용합니다. CheckBar에 의해 선택된 특정 행들은 복사나 삭제등 명령을 일괄처리 하기위해 사용할 수 있습니다. RealGrid가 화면에 로드될때 기본적으로 CheckBar의 visible 속성이 true이기 때문에 CheckBar를 사용하기 위해 별도의 설정을 할 필요가 없습니다.
RealGrid는 CheckBar의 사용을 위해 다양한 API를 제공하고 있습니다. 또한 특정 조건에 맞는 행만 체크할 수 있도록 제약 조건을 줄수도 있습니다.
제약 조건을 주는 방법은 [B8-3 CheckBar 사용하기 III] 에서 배워보도록 하겠습니다.
아래에서는 CheckBar와 관계되는 클래스, API 등을 설명하겠습니다.
CheckBar
CheckBar는 아래와 같이 8개의 속성으로 이루어져 있습니다.
width: 체크바의 폭을 지정합니다.showAll: checkbar.head 영역에 v 표시 여부를 지정합니다.showGroup: 행 그룹핑시 그룹헤더 영역에 v 표시 여부를 지정합니다.visibleOnly: 전체 선택시 보이는(expand된) 행들만 체크할 것인지의 여부를 지정합니다.checkableOnly: checkableExpression을 적용할 것인지의 여부를 지정합니다.visible: 그리드에 체크바 표시 여부를 지정합니다.exclusive: 한 행만 체크할 것인지를 지정합니다.checkableExpression: 체크 가능 여부의 수식을 지정합니다.
CheckBar에 체크 하기
체크바에 체크하는 방법으로는 너무나 당연하게도 사용자 클릭으로 하는 방법과 API를 이용한 방법이 있습니다.
아래 설명을 보면서 체크와 관련된 API의 기능을 익혀보도록 하겠습니다.
CheckBar에 한 행만 체크하기
체크바에 체크하는 함수로는 GridBase.checkItem(), GridBase.checkRow()가 있습니다. 이 두 함수는 하나의 행에 체크를 한다는 기능은 같지만 약간의 차이가 있습니다. 튜토리얼을 순서대로 따라하신 분들이라면 함수명을 보시고 어떤 차이가 있는지 눈치채신 분들이 계실꺼라 생각합니다. 이 두 함수의 차이점은 첫번째 파라메터를 ItemIndex를 기준으로 하는가, DataRow로 체크 하는가의 차이뿐이 없습니다. 이 두개의 차이는 A11 Data와 Item의 다른점은?에서 설명되어 있으니 다시 설명드리지는 않겠습니다. 두번째 파라메터인 checked는 체크 여부, 세번재 파라메터인 exclusive는 한 행만 체크하는지의 여부를 지정합니다.
CheckBar에 원하는 여러 행 체크하기
체크바에 일부만 체크하는 함수로는 GridBase.checkItems(), GridBase.checkRows()가 있습니다. 여러 행을 체크하기 때문에 첫번째 파라메터는 체크할 행들의 배열이며(itemIndicies, dataRows), 두번째 파라메터 체크 여부(checked)입니다.
CheckBar에 전체 체크 하기
RealGrid에서 전체 체크를 하는 방법으로는 checkBar의 head 영역을 클릭하는 방법이 있습니다. 또 다른 방법으로는 GridBase.checkAll() 함수를 사용하는 방법입니다. checkAll()에는 세개의 파라메터가 있으며, 첫번째 파라메터는 체크 여부를 지정하는 checked, 두번째 파라메터는 보이는(expand된) 행들만 체크할 것인지의 여부 지정하는 visibleOnly, 마지막 세번째 파라메터는 체크 가능한 행만 체크할 것인지의 여부를 지정하는 checkableOnly 가 있습니다.
CheckBar에 특정 행이 체크되었는지 확인하기
GridBase.isCheckedItem()과 GridBase.isCheckedRow()가 있습니다. 각 함수에 체크되었는지 확인하려는 itemIndex나 dataRow를 입력하면 됩니다.
실습
실습에서는 다양한 방법으로 체크/해제해 보고 itemIndex를 사용하는 함수와 dataRow를 사용하는 함수의 차이점을 살펴보도록 하겠습니다.
-
버튼을 클릭하면 화면에 CheckBar가 표시됩니다.(기본적으로 visible은 true이지만 실습 차원에서 초기값을 false로 설정하였습니다.)
$("#btnSetCheckBar").click(function () { //체크바 표시 gridView.setCheckBar({ visible: true; }); }); -
isCheckedItem()를 사용하여 첫 행에 체크 여부 확인하기
$("#btnIsCheckedItem").click(function () { alert(gridView.isCheckedItem(0)); }); -
checkItem()를 사용하여 첫 행(itemIndex = 0)에 체크하기
$("#btnCheckItem").click(function () { gridView.checkItem(0, true); }); -
checkItem()를 사용하여 첫 행에 체크 해제하기
$("#btnUnCheckItem").click(function () { gridView.checkItem(0, false); }); -
국어컬럼 내림차순으로 정렬하기
$("#btnOrderBy").click(function () { gridView.orderBy(['field4'],['descending']); }); -
checkRow()를 사용하여 첫 행(dataRow = 0)에 체크하기
$("#btnCheckRow").click(function () { gridView.checkRow(0, true); }); -
checkItems()를 사용하여 itemIndex가 2, 3인 행에 체크하기
$("#btnCheckItems").click(function () { gridView.checkItems([2, 3], true); }); -
checkRows()를 사용하여 dataRow가 4, 3인 행에 체크하기
$("#btnCheckRows").click(function () { gridView.checkRows([4, 3], true); }); -
checkAll(false)을 사용하여 모든 행 체크 해제
$("#btnUnCheckAll").click(function () { gridView.checkAll(false); });
실행화면
-
첫 행에 체크여부 확인하기. 체크되어 있지 않기 때문에 false가 표시됩니다.
-
itemIndex = 0인 행에 체크
-
2번 버튼을 클릭하여 첫 행에 체크여부 확인하기. 3번에서 체크를 했기 때문에 true가 표시됩니다.
-
dataRow = 0인 행에 체크. 정렬로 인해 화면에 표시되는 dataRow의 순서가 바뀌었기 때문에 5행에 체크표시가 되는것을 확인하세요.
-
3, 4행에 체크표시 되는것을 확인하세요
-
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"]
];
dataProvider.setRows(data);
gridView.setOptions({
indicator: {zeroBase: true},
checkBar: {visible: false}
});
$("#btnSetCheckBar").click(function () {
//체크바 표시
gridView.setCheckBar({
visible: true
});
});
//체크 여부 확인
$("#btnIsCheckedItem").click(function () {
alert(gridView.isCheckedItem(0));
});
//itemIndex = 0 체크
$("#btnCheckItem").click(function () {
gridView.checkItem(0, true);
});
//itemIndex = 0 체크 해제
$("#btnUnCheckItem").click(function () {
gridView.checkItem(0, false);
});
//국어 내림차순 정렬
$("#btnOrderBy").click(function () {
gridView.orderBy(['field4'],['descending']);
});
//dataRow = 0 체크
$("#btnCheckRow").click(function () {
gridView.checkRow(0, true);
});
//itemIndex[2, 3] 체크
$("#btnCheckItems").click(function () {
gridView.checkItems([2, 3], true);
});
//dataRow[4, 3] 체크
$("#btnCheckRows").click(function () {
gridView.checkRows([4, 3], true);
});
//모두 체크 해제
$("#btnUnCheckAll").click(function () {
gridView.checkAll(false);
});
});
</script>
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnSetCheckBar">그리드에 CheckBar 표시하기</button> 2. <button type="button" class="btn btn-primary btn-xs" id="btnIsCheckedItem">isCheckedItem(0)</button> 첫 행에 체크여부 확인하기. 체크되어 있지 않기 때문에 false가 표시됩니다. 3. <button type="button" class="btn btn-primary btn-xs" id="btnCheckItem">checkItem(0, true)를 사용하여 첫 행에 체크하기</button> itemIndex = 0인 행에 체크 4. 2번 버튼을 클릭하여 첫 행에 체크여부 확인하기. 3번에서 체크를 했기 때문에 true가 표시됩니다. 5. <button type="button" class="btn btn-primary btn-xs" id="btnUnCheckItem">checkItem(0, false)를 사용하여 첫 행에 체크 해제하기</button> 6. <button type="button" class="btn btn-primary btn-xs" id="btnOrderBy">국어컬럼 내림차순으로 정렬하기</button> 7. <button type="button" class="btn btn-primary btn-xs" id="btnCheckRow">checkRow(0)를 사용하여 첫 행에 체크하기</button> dataRow = 0인 행에 체크. 정렬로 인해 화면에 표시되는 dataRow의 순서가 바뀌었기 때문에 5행에 체크표시가 되는것을 확인하세요. 8. <button type="button" class="btn btn-primary btn-xs" id="btnCheckItems">checkItems([2,3], true)를 사용하여 체크하기</button> 3, 4행에 체크표시 되는것을 확인하세요 9. <button type="button" class="btn btn-primary btn-xs" id="btnCheckRows">checkRows([4,3], true)를 사용하여 체크하기</button> 1, 2행에 체크표시 되는것을 확인하세요. 10. <button type="button" class="btn btn-primary btn-xs" id="btnUnCheckAll">checkRows(false)를 사용하여 모든 행 체크 해제하기</button> <div id="realgrid" style="width: 100%; height: 250px;"></div>
데모 사이트
API 참조