RealGrid HELPA25 에디터(Editor)와 셀의 값
들어가며
이번 강좌에서는 RealGrid의 자료형(DataType)과 편집기(Editor)의 종류에 대해 배워보겠습니다. 추가로 그리드의 데이터를 가져오거나 넣는 방법에 대해 기본적인 내용만 알아보겠습니다.
이론
자료형(DataType)
자료형(DataType)은 DataProvider에서 데이터를 구성하는 DataField의 유형을 지정하며 아래와 같은 종류가 있습니다.
- TEXT : 문자형
- BOOL : 논리형
- NUMBER : 숫자형
- DATETIME : 날짜형
기본자료형을 제한하기 위한 용도로 하위자료형(SubDataType)이 있으며 아래와 같은 종류가 있습니다.
- CHAR
- UNUM
- INT
- UINT
- DATE
편집기(Editor)
편집기(Editor)는 사용자가 셀의 값을 수정할 수 있도록 그리드에서 제공되는 컨트롤이며 아래와 같은 종류가 있습니다.
- TextEditor - 한 줄 텍스트 편집기
- MultiLineEditor - 여러 줄 텍스트 편집기
- DropDownEditor - 드롭다운 선택 편집기
- NumberEditor - 숫자 편집기
- DateEditor - 날짜 편집기
- SearchEditor - 부분검색용 편집기
그리드의 값을 가져오거나 넣기위해 사용할 수 있는 함수
| Methods | GridBase | GridView | DataProvider | LocalDataProvider |
|---|---|---|---|---|
| GET | getValue() | getValue() | ||
| GETs | getValues() | getDistinctValues() getValues() | getFieldValues() | |
| SET | setValue() | setValue() | ||
| SETs | setValues() |
셀의 값의 가져오거나 넣는 함수는 itemIndex를 인자로 사용하여 행 정보를 가져오는 함수와 RowId를 인자로 행 정보를 가져오는 함수로 나누어 지는데, 당연하게도 GridBase와 GridView는 itemIndex를 인자로 사용하고 DataProvider와 LocalDataProvider는 RowId를 행 정보를 가져오기 위한 인자로 사용합니다.
이 두 Index의 차이는 실제 업무화면 구현시 항상 혼란을 가져오는 요소중 하나입니다. 값을 가져오거나 넣기 위해 GridView를 사용하는지 DataProvider를 사용하는지만 명확히 구분한다면 실수를 막을수 있습니다. 주의하여 사용해야 합니다.
실습
-
자료형을 날짜 또는 숫자로 지정하기 위해 필드의 dataType속성을
number또는dateTime으로 작성합니다.... { fieldName: "field4", dataType: "datetime" }, { fieldName: "field5", dataType: "number" }, ... -
성별컬럼의 편집기를 선택상자로 하기위해 아래와 같이 컬럼의 editor속성에 type을dropDown으로 작성하고values,labels등 속성에 값을 입력합니다.... , { name: "col2", fieldName: "field2", header : { text: "성별" }, editor : { type: "dropDown", dropDownCount: 2, values: ["남자", "여자"], labels: ["남", "여"] }, width: 50 }, ... -
생일컬럼의 편집기를 날짜선택상자로 하기위해 아래와 같이 컬럼의 editor속성에 type을date으로 작성하고datetimeFormat속성에 값을 입력합니다.... , { name: "col4", fieldName: "field4", header : { text: "생일" }, editor: { type: "date", datetimeFormat: "yyyy-MM-dd" }, width: 90 }, ... -
수학컬럼의 편집기를 숫자입력 편집기로 하기위해 아래와 같이 컬럼의 editor속성에 type을number으로 작성하고styles속성에 오른쪽 정렬을 위한textAlignment값을 입력합니다.... , { name: "col5", fieldName: "field5", header : { text: "수학" }, editor : { type: "number" }, styles: { textAlignment: "far" }, width: 80 }, ... -
버튼을 클릭하면 itemIndex 3, fieldIndex 2인 셀의 값을 가져오기 위해 GridBase의 getValue()함수를 호출하도록 코드를 작성 합니다.
//itemIndex 3, fieldIndex 2인 셀의 값 가져오기 $("#btnGetValue").click(function(){ var value = gridView.getValue(3, 2); alert(value); }) -
버튼을 클릭하면 RowId 3, fieldIndex 2인 셀의 값을 ‘태연’으로 변경하기 위해 LocalDataProvider의 setValue()함수를 호출하도록 코드를 작성 합니다.
//RowId 3, fieldIndex 2인 셀에 '태연' 값을 넣기 $("#btnSetValue").click(function(){ dataProvider.setValue(3, 2, '태연'); })
실행화면
-
실습에서 작성한 코드대로 편집기가 작동하는지 확인하세요.
-
버튼을 눌러
itemIndex가 3이고fieldIndex가 2인 셀의 값을 가져오는지 확인하세요. 정렬을 변경한 다음 어떤 값을 가져오는지 다시 한 번 확인하세요. -
버튼을 눌러
RowId가 3이고fieldIndex가 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",
dataType: "datetime"
},
{
fieldName: "field5",
dataType: "number"
},
{
fieldName: "field6",
dataType: "number"
},
{
fieldName: "field7",
dataType: "number"
},
{
fieldName: "field8",
dataType: "number"
},
{
fieldName: "field9",
dataType: "number"
},
{
fieldName: "field10",
dataType: "number"
}
];
//DataProvider의 setFields함수로 필드를 입력합니다.
dataProvider.setFields(fields);
//필드와 연결된 컬럼 배열 객체를 생성합니다.
var columns = [
{
name: "col1",
fieldName: "field1",
header : {
text: "직업"
},
width : 60
},
{
name: "col2",
fieldName: "field2",
header : {
text: "성별"
},
editor : {
type: "dropDown",
dropDownCount: 2,
values: ["남자", "여자"],
labels: ["남", "여"]
},
width: 50
},
{
name: "col3",
fieldName: "field3",
header : {
text: "이름"
},
width: 80
},
{
name: "col4",
fieldName: "field4",
header : {
text: "생일"
},
editor: {
type: "date",
datetimeFormat: "yyyy-MM-dd"
},
width: 90
},
{
name: "col5",
fieldName: "field5",
header : {
text: "수학"
},
editor : {
type: "number"
},
styles: {
textAlignment: "far"
},
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 = [
["가수", "여자", "정수라", "1988-09-02", "99", "90", "90", "100", "100", "90"],
["배우", "여자", "송윤아", "1990-02-18", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "전도연", "1991-08-21", "22", "90", "70", "60", "100", "80"],
["가수", "여자", "이선희", "1978-01-19", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "하지원", "1979-12-09", "11", "90", "70", "60", "100", "80"],
["가수", "여자", "소찬휘", "1987-05-12", "55", "90", "70", "60", "100", "80"],
["가수", "여자", "박정현", "1980-08-06", "22", "90", "70", "60", "100", "80"],
["배우", "여자", "전지현", "1977-03-28", "44", "90", "70", "60", "100", "80"]
];
dataProvider.setRows(data);
//itemIndex 3, fieldIndex 2인 셀의 값 가져오기
$("#btnGetValue").click(function(){
var value = gridView.getValue(3, 2);
alert(value);
})
//RowId 3, fieldIndex 2인 셀에 '태연' 값을 넣기
$("#btnSetValue").click(function(){
dataProvider.setValue(3, 2, '태연');
})
});
</script>
HTML
1. 실습에서 작성한 코드대로 편집기가 작동하는지 확인하세요. 2. <button type="button" class="btn btn-primary btn-xs" id="btnGetValue">GridBase.getValue(3, 2)</button> 버튼을 눌러 `itemIndex`가 3이고 `fieldIndex`가 2인 셀의 값을 가져오는지 확인하세요. 정렬을 변경한 다음 어떤 값을 가져오는지 다시 한 번 확인하세요. 3. <button type="button" class="btn btn-primary btn-xs" id="btnSetValue">DataProvider.setValue(3, 2, '태연')</button> 버튼을 눌러 `RowId`가 3이고 `fieldIndex`가 2인 셀에 `태연`이라는 값이 입력되는지 확인하세요. <div id="realgrid" style="width: 100%; height: 300px;"></div>
관련 데모 페이지
API 참조