RealGrid HELPB2-1 Fixed Rows
들어가며
행과 열 고정이란 그리드의 행(row)과 열(column) 중에서 스크롤에서 제외되는 행과 열을 정의합니다. 다시 말해서, 고정된 행이나 열은 그리드의 다른 데이터들이 스크롤 될때에도 왼쪽과 위쪽에 고정된채 스크롤되지 않습니다.
[A17 강좌]에서 행과 열 고정에 대한 기본적인 이론과 사용방법을 배웠습니다. 이 강좌에서는 행, 열 고정 중에 행 고정(Fixed Rows)상태에 사용할 수 있는 옵션에 대하여 배워보도록 하겠습니다.
이론
행(Row)이나 열(Column)을 고정하기(Fixing)위해서 GridBase.setFixedOptions()함수를 이용합니다.
이 함수의 인자는 FixedOptions라는 클래스이며 반환값은 없습니다. setFixedOptions()함수가 호출되는 즉시 FixedOptions의 속성값에 따라 그리드의 고정상태가 변경됩니다. 그 중에서 행 고정(Fixed Rows)의 옵션에 대해서 알아보도록 하겠습니다.
FixedOptions의 속성중에서 행 고정과 관련된 속성은 아래와 같습니다.
- rowCount
- 고정 행의 개수를 지정하여 고정 행을 그리드 위쪽에 지정합니다.
- 개수 설정으로 개수만큼 행을 고정 시킬 수 있습니다.
- exceptFromFiltering
- 고정 행들이 참조하고 있는 데이터 행들을 필터링에서 제외 합니다.
- true 설정으로 고정 행들이 참조하는 데이터를 필터링에서 제외 시킬 수 있습니다.
- false로 설정하면 고정 행 데이터를 필터링을 할 수 있습니다.
- true설정에서 false로 변경 되면 고정 행의 제외 되었던 데이터 값도 필터링에 포함되어 값이 나오게 됩니다.
- 다시 true로 설정할 경우에 RowId값의 순서에 따라 해당 행의 개수만큼 고정 행에 고정되어 보여지게 됩니다.
- exceptFromSorting
- 고정 행들이 참조하고 있는 데이터 행을 정렬에서 제외 시킵니다.
- true 설정으로 고정 행들이 참조하는 데이터를 정렬에서 제외 시킬 수 있습니다.
- false로 설정하면 고정 행 데이터를 정렬 할 수 있습니다.
- true설정에서 false로 변경되면 고정 행의 제외 되었던 데이터 값도 정렬에 포함되어 정렬되게 됩니다.
- 다시 true로 설정할 경우에 RowId값의 순서에 따라 해당 행의 개수만큼 고정 행에 고정되어 보여지게 됩니다.
- rowEditable
- 다른 속성들과 상관없이 고정 된 행을 수정 할 수 없는 상태로 설정합니다.
- rowEditable : false 설정으로 고정 행의 데이터를 수정 할 수 없는 상태로 만들 수 있습니다.
- true로 설정하면 고정 행의 데이터를 수정 할 수 있습니다.
- rowBarHeight
- 수평 고정 Bar의 설정 필셀 높이 만큼 수평고정 Bar를 설정 합니다.
- 높이 설정으로 높이에 필셀 단위로 숫자값을 설정하면 높이 만큼 수평 고정 Bar가 설정됩니다.
아래 실습을 통하여 FixedOptions의 설정을 변경하는 방법을 확인하세요.
주의사항 행 고정(Fixed Rows)사용시 보여지는 행의 수보다 많은 개수로 고정을 할 경우에는 그리드에 보여지는 모든 행이 고정되어 스크롤이 생기지 않아서 고정 되지 않은 행들에 대하여 조작을 할 수 없게 됩니다. 이 점을 고려하여 사용하시기 바랍니다.
실습
실습에서는 고정된 행에 대한 옵션을 설정 해보면서 설정된 값에 따른 변화를 살펴보도록 하겠습니다. 실습을 위한 행,열 고정에 관련된 설명은[A17 강좌]와 동일하며 이번 실습에서는 행 고정을 위한 실습이므로 행 고정(Fixed Rows)설정만 사용하도록 하겠습니다.
-
행 고정을 위해서 버튼을 클릭하면 고정될 수 있도록 아래 코드를 추가합니다.
$("#btnRowFixing").on("click", function(){ gridView.setFixedOptions({ rowCount: 1 }); }) -
버튼을 클릭하면 고정된 행이 참조하고 있는 데이터를 정렬에서 제외 시키기 위해 아래 코드를 추가합니다.
$("#btnExceptFormSorting").on("click", function(){ gridView.setFixedOptions({ exceptFromSorting: ture }); }) -
버튼을 클릭하면 고정된 행의 데이터를 수정할 수 없는 상태로 만들기 위해 아래 코드를 추가합니다.
$("#btnEditable").on("click", function(){ gridView.setFixedOptions({ rowEditable: false }); }) -
버튼을 클릭하면 고정된 행의 데이터를 필터링에서 제외 시키기 거나 다시 포함시키는 동작을 토글링 하기 위해 아래 코드를 추가합니다.
//고정 행 필터링 제외/포함 토글 $("#btnExceptFromFiltering").on("click", function(){ var bExceptFiltering = !gridView.getFixedOptions().exceptFromFiltering; gridView.setFixedOptions({ exceptFromFiltering: bExceptFiltering }); }) -
버튼을 클릭하면 수평 고정 Bar의 높이를 설정하기 위해 아래 코드를 추가합니다.
$("#btnrowBarHeight").on("click", function(){ gridView.setFixedOptions({ rowBarHeight: 10 }); })
실행화면
-
버튼을 클릭하여 1행 고정하기를 설정합니다. 첫 행이 고정 되었는지 확인합니다.
-
버튼을 클릭하여 고정 행을 정렬에서 제외시켜 줍니다. “이름”컬럼의 헤더 영역을 클릭하여 정렬이 변결될때 고정된 행은 정렬에서 제외되는 것을 확인합니다.
-
버튼 클릭시 고정 행을 수정불가 상태로 만들어 수정을 할 수 없게 합니다. 첫 행의 데이터를 수정을 시도하여 수정되지 않는 것을 확인합니다.
-
버튼을 클릭하여 고정 행을 필터링에서 제외시켜 줍니다. 직업, 성별 컬럼에서 필터링을 통하여 고정 행의 값이 필터링에서 제외된 모습을 확인합니다. 다시 버튼을 클릭하여 고정된 행이 필터링에 포함되는 모습을 확인합니다.
-
버튼을 클릭하여 수평 고정 Bar의 높이를 10으로 설정하여 수평 고정 Bar의 높이를 확인합니다.
전체 소스코드
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,
filters : [{
name: "가수",
criteria: "value = '가수'"
}, {
name: "배우",
criteria: "value = '배우'"
}]
},
{
name: "col2",
fieldName: "field2",
header : {
text: "성별"
},
width: 50,
filters : [{
name: "남자",
criteria: "value = '남자'"
}, {
name: "여자",
criteria: "value = '여자'"
}]
},
{
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"],
["가수", "남자", "성시경", "7", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "신해철", "8", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "윤상", "9", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "윤종신", "10", "100", "100", "100", "100", "100", "100"],
["가수", "여자", "이소라", "11", "100", "100", "100", "100", "100", "100"],
["배우", "여자", "강소라", "12", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "타블로", "13", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "이승환", "14", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "토이", "15", "100", "100", "100", "100", "100", "100"]
];
dataProvider.setRows(data);
//행 고정
$("#btnRowFixing").on("click", function(){
gridView.setFixedOptions({
rowCount: 1
});
})
//고정 행 정렬 제외
$("#btnExceptFromSorting").on("click", function(){
gridView.setFixedOptions({
exceptFromSorting: ture
});
})
//고정 행 수정 불가
$("#btnEditable").on("click", function(){
gridView.setFixedOptions({
rowEditable: false
});
})
//고정 행 필터링 제외/포함 토글
$("#btnExceptFromFiltering").on("click", function(){
var bExceptFiltering = gridView.getFixedOptions().exceptFromFiltering;
gridView.setFixedOptions({
exceptFromFiltering: !bExceptFiltering
});
})
//수평 고정 Bar 높이
$("#btnrowBarHeight").on("click", function(){
gridView.setFixedOptions({
rowBarHeight: 10
});
})
});
</script>
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnRowFixing">1행 고정하기</button> 버튼을 클릭하여 1행 고정하기를 설정합니다. 첫 행이 고정 되었는지 확인합니다. 2. <button type="button" class="btn btn-primary btn-xs" id="btnExceptFromSorting">정렬 제외하기</button> 버튼을 클릭하여 고정 행을 정렬에서 제외시켜 줍니다. "이름"컬럼의 헤더 영역을 클릭하여 정렬이 변결될때 고정된 행은 정렬에서 제외되는 것을 확인합니다. 3. <button type="button" class="btn btn-primary btn-xs" id="btnEditable">수정불가</button>버튼 클릭시 고정 행을 수정불가 상태로 만들어 수정을 할 수 없게 합니다. 첫 행의 데이터를 수정을 시도하여 수정되지 않는 것을 확인합니다. 4. <button type="button" class="btn btn-primary btn-xs" id="btnExceptFromFiltering">필터링 제외/포함 토글</button> 버튼을 클릭하여 고정 행을 필터링에서 제외시켜 줍니다. 직업, 성별 컬럼에서 필터링을 통하여 고정 행의 값이 필터링에서 제외된 모습을 확인합니다. 다시 버튼을 클릭하여 고정된 행이 필터링에 포함되는 모습을 확인합니다. 5. <button type="button" class="btn btn-primary btn-xs" id="btnrowBarHeight">수평 고정 Bar</button> 버튼을 클릭하여 수평 고정 Bar의 높이를 10으로 설정하여 수평 고정 Bar의 높이를 확인합니다. <div id="realgrid" style="width:100%; height:300px;"></div>
데모 사이트
API 참조