RealGrid HELPB8-2 CheckBar 사용하기 II
들어가며
이번 강좌에서는 CheckBar에서 체크된 행을 가져오는 것을 배워보도록 하겠습니다.
이론
RealGrid는 Item모델과 Data모델(GridItem 참조)로 이루어져 있습니다. 이 두 개의 차이점을 이해한다면 RealGrid에 대해서 100% 이해하신거나 마찬가지 입니다. 이런 말씀을 드리는 이유는 이 장에서 설명하는 GridBase.checkItems(), GridBase.checkRows(),GridView.getCheckedItems(), GridView.getCheckedRows() 함수 때문입니다. 함수명을 보시고 짐작하셨겠지만 앞장에서도 언급한(A11 Data와 Item의 다른점은?) 내용입니다.
이 내용을 이해하셨다면 비슷한 기능을 하는 함수이지만 함수의 특성과 파라메터가 왜 다른지 이해가 가실겁니다.
아래에서는 위 4개의 함수에 대하여 자세히 알아보도록 하겠습니다.
여러 행을 한번에 체크하기
GridBase.checkItems()의 파라메터는 items와 checked가 있습니다. items는 체크할 Item모델의 itemIndex들의 배열, checked는 체크 여부입니다. GridBase.checkRows()의 파라메터는 dataRows와 checked가 있습니다. 짐작하셨다시피 dataRows는 체크할 Data모델 id들의 배열, checked는 체크 여부입니다.
그리고, 당연한 이야기지만 그룹헤더나 그룹푸터 같이 Item모델에만 속한 행들은 GridBase.checkRow(), GridBase.checkRows() 함수를 사용하여 체크할 수 없습니다.
체크된 행의 itemIndex가져오기
GridView.getCheckedItems()의 파라메터는 all 하나만 있습니다. 그룹 헤더나 그룹 푸터를 포함한 모든 영역에 체크가 되어 있을 경우 false로 하면 데이터영역의 itemIndex만, true로 하면 모든 영역의 itemIndex가 결과로 나옵니다.
체크된 행의 dataRow가져오기
GridView.getCheckedRows()](/api/GridView/getCheckedRows/)의 파라메터는 sort, visibleOnly가 있습니다. 그리드에 데이터가 처음 로드가 되면 각 itemIndex와 dataRow는 기본적으로 같습니다. 하지만 그리드가 소트나 그룹핑이 되면 itemIndex와 dataRow는 같지 않습니다. itemIndex는 순차적으로 나와도 dataRow는 대게 뒤죽박죽 나오게 됩니다. 이런 경우 sort를 true로 주게 되면 함수의 결과로 나오는 dataRows는 정렬되어 나오게 됩니다.
visibleOnly 속성이 true 일 경우 그리드가 그루핑 되어있고 데이터 영역에 체크가 되어 있지만 해당 그룹이 접혀(collapse)있어 체크된 것이 보이지 않을 경우 결과에서 제외 됩니다.
그리고 그룹헤더나 푸터가 체크 되어 있어도 그룹헤더나 푸터는 ItemModel에 속해 있기 떄문에 어떠한 경우에도 결과에 포함되지 않습니다.
유의사항
getCheckedItems() 함수를 사용하면서 자주 실수하시는 부분이 getCheckedItems()로 체크된 행들(ItemIndex)을 가져오고 dataRow가 필요한 함수에 이 값들을 사용하는 것입니다. 예를들어 행 삭제 함수인 dataProvider.removeRows()의 파라메터 값으로 이 값을 넘기는 경우입니다. 이 경우 정렬이나 필터링, 그룹핑이 되어 있지 않다면 itemIndex와 dataRow가 같기 때문에 정상적으로 삭제되지만 정렬이나 필터링, 그룹핑이 되어 있다면 dataRow와 itemIndex가 다르기 때문에 원하는 삭제 결과를 얻으실 수 없습니다.
실습
실습에서는 다양한 방법으로 체크/해제해 보고 itemIndex를 사용하는 함수와 dataRow를 사용하는 함수의 차이점을 살펴보도록 하겠습니다.
-
버튼을 클릭하면 그리드를 직업컬럼으로 그룹핑 합니다.
$("#btnGroupBy").click(function () { //직업필드로 그룹핑 gridView.groupBy('field0'); }); -
checkItems([0,1,2], true)를 사용하여 체크하기
$("#btnCheckItems").click(function () { gridView.checkItems([0,1,2], true); }); -
getCheckedItems(true) 체크된 행 가져오기
$("#btnGetCheckedItems_T").click(function () { alert(gridView.getCheckedItems(true)); }); -
getCheckedItems(false) 체크된 행 가져오기
$("#btnGetCheckedItems_F").click(function () { alert(gridView.getCheckedItems(false)); }); -
체크된 행 모두 해제하기
$("#btnUnCheckAll").click(function () { gridView.checkAll(false); }); -
checkRows([0,1,2], true)를 사용하여 체크하기
$("#btnCheckRows").click(function () { gridView.checkRows([0,1,2], true); }); -
getCheckedRows(true, false) 체크된 행 가져오기
$("#btnGetCheckedRows_TF").click(function () { alert(gridView.getCheckedRows(true, false)); }); -
getCheckedRows(false, false) 체크된 행 가져오기
$("#btnGetCheckedRows_FF").click(function () { alert(gridView.getCheckedRows(false, false)); }); -
getCheckedRows(true, true) 체크된 행 가져오기
$("#btnGetCheckedRows_TT").click(function () { alert(gridView.getCheckedRows(true, true)); }); -
getCheckedRows(false, true) 체크된 행 가져오기
$("#btnGetCheckedRows_FT").click(function () { alert(gridView.getCheckedRows(false, true)); }); -
가수 그룹을 Collapse 하기
$("#btnCollapse").click(function () { gridView.collapseGroup(0); });
실행화면
-
Item모델 첫 3행에 체크표시, 가수 그룹헤더, 이선희, 박정현이 체크되는것을 확인하세요
-
모든 행을 가져옴, 결과:[0, 1, 2]
-
Item모델만 있는 행은 제외하고 가져옴, 결과:[1, 2]
-
Data모델 첫 3행에 체크표시, 이선희, 전도연, 하지원에 체크되는 것을 확인하세요
-
결과를 소트하고 모든 행을 표시
-
결과를 소트하지않고 모든 행을 표시
-
결과를 소트하고 보이는(expand된) 행만 표시
-
결과를 소트하지않고 보이는(expand된) 행만 표시
-
7~11버튼을 각각 눌러 결과가 어떻게 다른지 확인하세요.
전체 소스코드
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},
checkBar: {visible: true},
stateBar: {visible: false}
});
//버튼을 클릭하면 그리드를 직업컬럼으로 그룹핑 합니다.
$("#btnGroupBy").click(function () {
//직업필드로 그룹핑
gridView.groupBy('field0');
});
//checkItems([0,1,2], true)를 사용하여 체크하기
$("#btnCheckItems").click(function () {
gridView.checkItems([0,1,2], true);
});
//getCheckedItems(true) 체크된 행 가져오기
$("#btnGetCheckedItems_T").click(function () {
alert(gridView.getCheckedItems(true));
});
//getCheckedItems(false) 체크된 행 가져오기
$("#btnGetCheckedItems_F").click(function () {
alert(gridView.getCheckedItems(false));
});
//체크된 행 모두 해제하기
$("#btnUnCheckAll").click(function () {
gridView.checkAll(false);
});
//checkRows([0,1,2], true)를 사용하여 체크하기
$("#btnCheckRows").click(function () {
gridView.checkRows([0,1,2], true);
});
//getCheckedRows(true, false) 체크된 행 가져오기
$("#btnGetCheckedRows_TF").click(function () {
alert(gridView.getCheckedRows(true, false));
});
//getCheckedRows(false, false) 체크된 행 가져오기
$("#btnGetCheckedRows_FF").click(function () {
alert(gridView.getCheckedRows(false, false));
});
//getCheckedRows(true, true) 체크된 행 가져오기
$("#btnGetCheckedRows_TT").click(function () {
alert(gridView.getCheckedRows(true, true));
});
//getCheckedRows(false, true) 체크된 행 가져오기
$("#btnGetCheckedRows_FT").click(function () {
alert(gridView.getCheckedRows(true, false));
});
//가수 그룹을 Collapse 하기
$("#btnCollapse").click(function () {
gridView.collapseGroup(0);
});
});
</script>
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnGroupBy">직업컬럼으로 그룹핑</button> 2. <button type="button" class="btn btn-primary btn-xs" id="btnCheckItems">checkItems([0,1,2], true)</button> Item모델 첫 3행에 체크표시, 가수 그룹헤더, 이선희, 박정현이 체크되는것을 확인하세요 3. <button type="button" class="btn btn-primary btn-xs" id="btnGetCheckedItems_T">getCheckedItems(true)</button> 모든 행을 가져옴, 결과:[0, 1, 2] 4. <button type="button" class="btn btn-primary btn-xs" id="btnGetCheckedItems_F">getCheckedItems(false)</button> Item모델만 있는 행은 제외하고 가져옴, 결과:[1, 2] 5. <button type="button" class="btn btn-primary btn-xs" id="btnUnCheckAll">체크된 행 모두 해제하기</button> 6. <button type="button" class="btn btn-primary btn-xs" id="btnCheckRows">checkRows([0,1,2], true)</button> Data모델 첫 3행에 체크표시, 이선희, 전도연, 하지원에 체크되는 것을 확인하세요 7. <button type="button" class="btn btn-primary btn-xs" id="btnGetCheckedRows_TF">getCheckedRows(true, false) </button> 결과를 소트하고 모든 행을 표시 8. <button type="button" class="btn btn-primary btn-xs" id="btnGetCheckedRows_FF">getCheckedRows(false, false)</button> 결과를 소트하지않고 모든 행을 표시 9. <button type="button" class="btn btn-primary btn-xs" id="btnGetCheckedRows_TT">getCheckedRows(true, true) </button> 결과를 소트하고 보이는(expand된) 행만 표시 10. <button type="button" class="btn btn-primary btn-xs" id="btnGetCheckedRows_FT">getCheckedRows(false, true) </button> 결과를 소트하지않고 보이는(expand된) 행만 표시 11. <button type="button" class="btn btn-primary btn-xs" id="btnCollapse">가수 그룹을 Collapse 하기</button> 12. 7~11버튼을 각각 눌러 결과가 어떻게 다른지 확인하세요. <div id="realgrid" style="width: 100%; height: 250px;"></div>
데모 사이트
API 참조