RealGrid HELPB7-8 편집기(Editors) I
들어가며
이번 강좌에서는 데이터 셀들의 값을 수정할 수 있는 편집기에 대해 알아보겠습니다.
이론
RealGrid는 데이터 셀의 값을 수정할 수 있는 기본적인 편집기(Cell Editor) 몇가지를 제공 하고 있습니다. RealGrid에서 제공하는 편집기들에 대해 알아보고 배워보도록 하겠습니다.
편집기(Cell Editor)의 종류
편집기의 종류는 RealGridJS 버전 1.0.13를 기준으로 Text Editor, Multi Line Editor, Number Editor, Date Editor, DropDown Editor, Search Editor등 6종류의 편집기가 있습니다. 이 중 DropDown Editor와 Search Editor는 각각 별도의 강좌로 분리하고 이번 장좌에서는 나머지 4종류의 편집기에 대해서만 다루도록 하겠습니다.
편집기는 DataColumn의 editor 속성을 사용해 지정할 수 있습니다. 편집기의 종류에 따라 설정해야할 DataColumn의 속성은 다음과 같습니다.
Text Editor(Line Editor)
한 줄의 텍스트를 입력할 수 있는 기본 에디터 입니다. 별다른 지정이 없으면 이 에디터로 지정됩니다.
type: ‘line’으로 지정합니다.maxLength: 입력 가능한 문자의 최대 개수를 지정합니다. 기본값 0, 0으로 지정하면 글자수의 제한이 없습니다.textCase: 에디터에 입력되는 값을 모두 대문자, 소문자 또는 입력하는대로 표시하도록 할 수 있으며, TextInputCase 속성중 하나를 입력하여 설정할 수 있습니다.
Multi Line Editor
멀티라인에디터로 사용하기 위해서는 에디터의 속성을 multiLine으로 지정해야 합니다.
라인 구분자(\n\r)로 나누어지는 여러 줄을 텍스트를 입력할 때 사용합니다. 입력되는 텍스트에 맞춰 편집기의 크기가 조정 됩니다.
입력시 Shift + Enter key 로 줄 나누기를 할 수 있습니다.
type: ‘multiLine’으로 지정합니다.maxLength: 입력 가능한 문자의 최대 개수를 지정합니다. 기본값 0, 0으로 지정하면 글자수의 제한이 없습니다.textCase: 에디터에 입력되는 값을 모두 대문자, 소문자 또는 입력하는대로 표시하도록 할 수 있으며, TextInputCase 속성중 하나를 입력하여 설정할 수 있습니다.
Number Editor
숫자를 입력할때 사용하는 편집기 입니다. Number Editor에는 숫자, +, -, . 이외의 문자를 입력 할 수 없습니다.
type: ‘number’로 지정합니다.maxLength: 부호와 소수점을 포함한 입력할 수 있는 최대 자리수를 지정합니다. 0 으로 지정하면 제한없이 입력 가능합니다.positiveOnly: 양수만 입력가능하게 할것인지의 여부를 지정합니다.intergerOnly: 정수만 입력가능하게 할것인지의 여부를 지정합니다.
Date Editor
날짜를 입력할때 사용하는 에디터입니다. 달력 팝업를 표시해서 날짜를 선택할 수 있습니다.
RealGridJS V1.0.13 버전 부터는 달력 팝업에 표시되는 달력의 년과 월, 그리 요일의 표시 문구를 GridBase.setEditorOptions()을 통해 개발자가 원하는 대로 바꿀 수 있습니다. (ex 월, 화, 수… -> Mon, Tue, Wed…)
type: ‘date’로 지정합니다.yearNavigation: 달력 팝업에 년도이동버튼이 표시됩니다. 기본값은 false.textReadOnly: true이면 키보드로 입력이 안되고 선택만 가능하게 됩니다.commitOnSelect: 달력을 선택하였을때 commit 여부를 지정합니다.editFormat: 편집기에서 직접 입력때의 포맷을 지정합니다.
[편집기 설정예]
var col = {
name: "Column1",
fieldName: "Field1",
editor: { type: "date" }
}
실습
실습에서는 각 에디터들의 동작을 확인하고 익혀보도록 하겠습니다.
-
각 컬럼의 editor속성과 styles에 numberFormat, datetimeFormat 적용한것을 확인하세요.
... 생략 ... { name: "col4", fieldName: "field4", editor: { type: "date" }, header : { text: "입학일" }, styles : { textAlignment: "center", datetimeFormat: "yyyy/MM/dd" }, width: 90 }, { name: "col5", fieldName: "field5", editor: { type: "number", maxLength: 5 }, header: { text: "국어" }, styles: { textAlignment: "center" }, width: 50 }, { name: "col6", fieldName: "field6", editor: { type: "number", maxLength: 5, positiveOnly: true }, header: { text: "수학" }, styles: { textAlignment: "center" }, width: 50 }, { name: "col7", fieldName: "field7", editor: { type: "number", maxLength: 5, integerOnly: true }, header: { text: "민법" }, styles: { textAlignment: "center" }, width: 50 }, { name: "col8", fieldName: "field8", header: { text: "장학금" }, styles: { textAlignment: "far", numberFormat: "#,##0" }, width: 70 }, { name: "col9", fieldName: "field9", editor: { type: "multiLine" }, header: { text: "메모" }, styles: { textAlignment: "near" }, width: 150 } -
입학일 컬럼의
textReadOnly속성을 true로 지정합니다.$("#btnSetTextReadOnly").click(function () { gridView.setColumnProperty("col4", "editor", {textReadOnly: true}); }); -
메모 컬럼의
textWrap속성을 ‘explicit’로 지정합니다.$("#btnSetTextWrap").click(function () { gridView.setColumnProperty("col9", "styles", {textWrap: "explicit"}); });
실행화면
-
각 컬럼의 editor속성과 styles에 numberFormat, datetimeFormat 적용한것을 확인하세요.
- 입학일 컬럼이 Date Editor로 설정되었고 “yyyy/MM/dd”의 형식으로 표시되는지 확인하세요.
- 국어, 수학, 민법 컬럼은 Number Editor로 설정되어 있는지 문자를 입력해 보세요. 숫자 컬럼은 문자를 입력할 수 없습니다.
-
입학일을 키보드로 직접 수정해보세요. 수정이 잘 되는 것을 확인하세요.
-
입학일 컬럼의
textReadOnly속성을 true로 지정합니다. -
입학일을 키보드로 직접 수정해보세요. 수정이 안되는 것을 확인하세요.
-
국어 컬럼의 값을 수정해보세요. 양, 음의 정수, 실수 입력이 가능합니다.
-
수학 컬럼의 값을 수정해보세요. 양의 정수, 실수만 입력 가능합니다.
-
민법 컬럼의 값을 수정해보세요. 양, 음의 정수만 입력 가능합니다.
-
3행 하지원의 마지막 메모 컬럼에서
shift+enter키를 사용해서 여러줄의 데이터를 입력해 보세요. 편집이 완료되면 여러 줄로 보여야하나 그렇게 보이지 않습니다. -
메모 컬럼에
textWrap속성을 ‘explicit’로 지정합니다. -
메모 컬럼의 데이터들이 여러 줄로 나뉘어 보이는 것을 확인하세요.
전체 소스코드
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_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();
//dataProvider.setOptions({datetimeFormat: "yyyyMMdd"});
gridView = new RealGridJS.GridView("realgrid");
gridView.setDataSource(dataProvider);
//필드 배열 객체를 생성합니다.
var fields = [
{
fieldName: "field1"
},
{
fieldName: "field2"
},
{
fieldName: "field3"
},
{
fieldName: "field4",
dataType: "datetime",
datetimeFormat: "yyyyMMdd"
},
{
fieldName: "field5",
dataType: "number"
},
{
fieldName: "field6",
dataType: "number"
},
{
fieldName: "field7",
dataType: "number"
},
{
fieldName: "field8",
dataType: "number"
},
{
fieldName: "field9"
}
];
//DataProvider의 setFields함수로 필드를 입력합니다.
dataProvider.setFields(fields);
//필드와 연결된 컬럼 배열 객체를 생성합니다.
var columns = [
{
name: "col1",
fieldName: "field1",
header: {
text: "직업"
},
styles: {
textAlignment: "center"
},
width: 40
},
{
name: "col2",
fieldName: "field2",
header: {
text: "성별"
},
styles: {
textAlignment: "center"
},
width: 40
},
{
name: "col3",
fieldName: "field3",
header: {
text: "이름"
},
styles: {
textAlignment: "center"
},
width: 50
},
{
name: "col4",
fieldName: "field4",
editor: {
type: "date"
},
header : {
text: "입학일"
},
styles : {
textAlignment: "center",
datetimeFormat: "yyyy/MM/dd"
},
width: 90
},
{
name: "col5",
fieldName: "field5",
editor: {
type: "number",
maxLength: 5
},
header: {
text: "국어"
},
styles: {
textAlignment: "center"
},
width: 50
},
{
name: "col6",
fieldName: "field6",
editor: {
type: "number",
maxLength: 5,
positiveOnly: true
},
header: {
text: "수학"
},
styles: {
textAlignment: "center"
},
width: 50
},
{
name: "col7",
fieldName: "field7",
editor: {
type: "number",
maxLength: 5,
integerOnly: true
},
header: {
text: "민법"
},
styles: {
textAlignment: "center"
},
width: 50
},
{
name: "col8",
fieldName: "field8",
header: {
text: "장학금"
},
styles: {
textAlignment: "far",
numberFormat: "#,##0"
},
width: 70
},
{
name: "col9",
fieldName: "field9",
editor: {
type: "multiLine"
},
header: {
text: "메모"
},
styles: {
textAlignment: "near"
},
width: 150
}
];
//컬럼을 GridView에 입력 합니다.김
gridView.setColumns(columns);
var data = [
["배우", "여자", "김도연", "20000101", "70", "90", "70", "1000000", "매우\r\n우수"],
["가수", "여자", "이선희", "20000101", "90", "90", "70", "2000000", "아주\r\n우수"],
["배우", "여자", "하지원", "20000101", "100", "90", "70", "3000000", ""],
["가수", "여자", "박정현", "20000101", "90", "90", "70", "100000", ""],
["배우", "여자", "전지현", "20000101", "100", "90", "70", "100000", ""],
["가수", "남자", "성시경", "20000101", "70", "100", "100", "100000", ""],
["가수", "남자", "신해철", "20000101", "100", "90", "100", "100000", ""],
["가수", "여자", "루시아", "20000101", "100", "100", "100", "100000", ""],
["가수", "남자", "윤종신", "20000101", "90", "100", "80", "100000", ""],
["가수", "여자", "이소라", "20000101", "100", "80", "100", "100000", ""],
["배우", "여자", "강소라", "20000101", "90", "100", "70", "100000", ""],
["가수", "남자", "타블로", "20000101", "60", "100", "100", "100000", ""],
["가수", "남자", "이승환", "20000101", "70", "90", "100", "100000", ""],
["가수", "남자", "조규찬", "20000101", "90", "100", "90", "100000", ""]
];
dataProvider.setRows(data);
gridView.setOptions({
header: {height: 50},
edit: {insertable: true, appendable: true, updatable: true, editable: true, deletable: true},
display: {rowHeight: 50}
});
dataProvider.setOptions({
softDeleting: true
})
// 입학일 컬럼의 `textReadOnly`속성을 true로 지정합니다.
$("#btnSetTextReadOnly").click(function () {
gridView.setColumnProperty("col4", "editor", {textReadOnly: true});
});
//메모 컬럼에 `textWrap`속성을 'explicit'로 지정합니다.
$("#btnSetTextWrap").click(function () {
gridView.setColumnProperty("col9", "styles", {textWrap: "explicit"});
});
});
</script>
HTML
1. 각 컬럼의 editor속성과 styles에 numberFormat, datetimeFormat 적용한것을 확인하세요.
- 입학일 컬럼이 Date Editor로 설정되었고 "yyyy/MM/dd"의 형식으로 표시되는지 확인하세요.
- 국어, 수학, 민법 컬럼은 Number Editor로 설정되어 있는지 문자를 입력해 보세요. 숫자 컬럼은 문자를 입력할 수 없다는 것을 확인하세요.
2. 입학일을 키보드로 직접 수정해보세요. 수정이 잘 되는 것을 확인하세요.
3. <button type="button" class="btn btn-primary btn-xs" id="btnSetTextReadOnly">SetTextReadOnly</button> 입학일 컬럼의 `textReadOnly`속성을 true로 지정합니다.
4. 입학일을 키보드로 직접 수정해보세요. 수정이 안되는 것을 확인하세요.
5. 국어 컬럼의 값을 수정해보세요. 양과 음의 정수, 실수 입력이 가능합니다.
6. 수학 컬럼의 값을 수정해보세요. 양의 정수, 실수만 입력 가능합니다.
7. 민법 컬럼의 값을 수정해보세요. 양과 음의 정수만 입력 가능합니다.
8. 3행 하지원의 마지막 메모 컬럼에서 `shift` + `enter` 키를 사용해서 여러줄의 데이터를 입력해 보세요. 편집이 완료되면 여러 줄로 보여야하나 그렇게 보이지 않습니다.
9. <button type="button" class="btn btn-primary btn-xs" id="btnSetTextWrap">SetTextWrap</button> 메모 컬럼에 `textWrap`속성을 'explicit'로 지정합니다.
10. 메모 컬럼의 데이터들이 여러 줄로 나뉘어 보이는 것을 확인하세요.
<div id="realgrid" style="width: 100%; height: 250px;"></div>
데모 사이트
API 참조