RealGrid HELPA22 셀 선택하기(Selecting) - 동적으로 셀 선택하기
들어가며
[A20 강좌]와 [A21 강좌]에서는 사용자가 마우스를 이용해서 선택영역을 지정하는 방법 및 스타일과 선택영역의 데이터를 가져오는 방법에 대해 알아보았습니다. 이번 강좌에서는 동적(프로그램적)으로 그리드의 특정영역을 선택하는 방법에 대해 배워보겠습니다.
이론
RealGrid에는 그리드의 선택영역 정보를 가진 SelectionItem이란 클래스가 있습니다. SelectionItem은 선택영역의 시작점과 끝점의 정보를 포함하고 있으며 선택의 종류를 구분하기 위한 SelectionStyle정보도 포함합니다. 선택영역 정보(SelectionItem)을 그리드에 적용하거나 가져오기 위해 다음과 같은 함수가 준비되어 있습니다.
- 선택영역을 가져오는 함수: GridBase.getSelection();
- 선택영역을 적용하는 함수: GridBase.setSelection();
- 선택영역을 지우는 함수: GridBase.clearSelection();
SelectionItem에는 영역을 선택하는 방법에 따라 style속성을 지정해 주면 됩니다. style속성에는 “bolck”, “rows”, “columns”의 값을 입력하고 각각의 스타일에 따라 다음과 같은 범위지정 속성에 값을 입력합니다.
- style: “block”인 경우 startItem, endItem 또는 startRow, endRow 와 startColumn, endColumn
- style: “rows”인 경우 startItem, endItem 또는 startRow, endRow
- style: “columns”인 경우 startColumn, endColumn
실습
-
버튼을 클릭하면 Selection style에 따라 블럭, 행, 컬럼을 선택하도록 setSelection()함수를 호출하는 코드를 작성합니다.
// 블럭단위 선택영역 지정하기 $("#btnSetBlockSelection").on("click", function(){ var selection = { style: "block", startItem: 2, endItem: 4, startColumn: "col3", endColumn: "col5" } gridView.setSelection(selection); }) // 행단위 선택영역 지정하기 $("#btnSetRowSelection").on("click", function(){ var selection = { style: "rows", startRow: 3, endRow: 5 } gridView.setSelection(selection); }) // 컬럼단위 선택영역 지정하기 $("#btnSetColumnSelection").on("click", function(){ var selection = { style: "columns", startColumn: "col4", endColumn: "col6" } gridView.setSelection(selection); }) -
버튼을 클릭하면 선택영역정보(SelectionItem)를 가져오기위해 getSelection()함수를 호출하는 코드를 작성합니다.
// SelectionItem 가져오기 $("#btnGetSelection").on("click", function(){ var selection = gridView.getSelection(); alert(JSON.stringify(selection)); }) -
버튼을 클릭하면 선택영역을 제거하기위해 clearSelection()함수를 호출하는 코드를 작성합니다.
// 선택영역 모두 지우기 $("#btnClearSelection").on("click", function(){ gridView.clearSelection(); })
실행화면
-
버튼을 클릭하여 ItemId: 2 ~ 4, Column: “col3” ~ “col5” 의 범위가 선택되었는지 확인합니다.
-
버튼을 클릭하여 팝업된 선택영역정보(SelectionItem)를 확인하세요.
-
버튼을 클릭하여 선택영역이 그리드에서 사라지는 것을 확인하세요.
-
버튼을 클릭하여 RowId: 3 ~ 5 범위의 행이 선택되었는지 확인 합니다.
-
버튼을 클릭하여 Column: “Col4” ~ “Col6” 범위의 컬럼이 선택되었는지 확인 합니다.
전체 소스코드
SCRIPT
<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.11.2.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 = [
["가수", "여자", "정수라", "80", "99", "90", "90", "100", "100", "90"],
["배우", "여자", "송윤아", "10", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "전도연", "20", "22", "90", "70", "60", "100", "80"],
["가수", "여자", "이선희", "40", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "하지원", "10", "11", "90", "70", "60", "100", "80"],
["가수", "여자", "소찬휘", "30", "55", "90", "70", "60", "100", "80"],
["가수", "여자", "박정현", "40", "22", "90", "70", "60", "100", "80"],
["배우", "여자", "전지현", "20", "44", "90", "70", "60", "100", "80"]
];
dataProvider.setRows(data);
// SelectionItem 가져오기
$("#btnGetSelection").on("click", function(){
var selection = gridView.getSelection();
alert(JSON.stringify(selection));
})
// 블럭단위 선택영역 지정하기
$("#btnSetBlockSelection").on("click", function(){
var selection = {
style: "block",
startItem: 2,
endItem: 4,
startColumn: "col3",
endColumn: "col5"
}
gridView.setSelection(selection);
})
// 행단위 선택영역 지정하기
$("#btnSetRowSelection").on("click", function(){
var selection = {
style: "rows",
startRow: 3,
endRow: 5
}
gridView.setSelection(selection);
})
// 컬럼단위 선택영역 지정하기
$("#btnSetColumnSelection").on("click", function(){
var selection = {
style: "columns",
startColumn: "col4",
endColumn: "col6"
}
gridView.setSelection(selection);
})
// 선택영역 모두 지우기
$("#btnClearSelection").on("click", function(){
gridView.clearSelection();
})
});
</script>
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnSetBlockSelection">블럭단위 선택영역 적용하기</button> 버튼을 클릭하여 ItemId: 2 ~ 4, Column: "col3" ~ "col5" 의 범위가 선택되었는지 확인합니다.
2. <button type="button" class="btn btn-primary btn-xs" id="btnGetSelection">선택영역 정보 가져오기</button> 버튼을 클릭하여 팝업된 선택영역정보(SelectionItem)를 확인하세요.
3. <button type="button" class="btn btn-primary btn-xs" id="btnClearSelection">선택영역 지우기</button> 버튼을 클릭하여 선택영역이 그리드에서 사라지는 것을 확인하세요.
4. <button type="button" class="btn btn-primary btn-xs" id="btnSetRowSelection">행단위 선택영역 적용하기</button> 버튼을 클릭하여 RowId: 3 ~ 5 범위의 행이 선택되었는지 확인 합니다.
5. <button type="button" class="btn btn-primary btn-xs" id="btnSetColumnSelection">컬럼단위 선택영역 적용하기</button> 버튼을 클릭하여 Column: "Col4" ~ "Col6" 범위의 컬럼이 선택되었는지 확인 합니다.
<div id="realgrid" style="width: 100%; height: 300px;"></div>
데모 사이트
API 참조