RealGrid HELPB7-9 편집기(Editors) II - DropDown Editor
들어가며
이번 강좌는 [B7-9 편집기(Editor)]강좌에 이어 DropDown Editor에 대해 알아보겠습니다.
이론
드롭다운 에디터(DropDown Editor)는 콤보상자 형식의 컨트롤을 통해 데이터 셀을 편집할 수 있는 기능을 제공하는 에디터입니다.
드롭다운 에디터(DropDown Editor)를 사용하기 위해서는 에디터의 values속성과 labels속성에 값들을 입력해 주어야 합니다. values에는 데이터 값을 입력해야 하고 labels에는 데이터 값에 대응하여 그리드에 표시할 값을 입력해 줍니다.
유의사항
- 기본적으로
labels의 항목 수는values의 항목 수와 같아야 합니다.labels이 많은 경우는 상관 없으나values가 많다면 목록에는values의 값들이 표시됩니다. - values에 없는 데이터가 입력되는 경우 입력된 값 그대로 표시됩니다.
드롭다운 에디터를 사용하려면 DataColumn의 type속성을 ‘dropDown’으로 지정합니다.
아래는 드롭다운 에디터(DropDown Editor)의 속성에 대한 설명 입니다.
maxLength: 입력 가능한 문자의 최대 개수를 지정합니다. 기본값 0, 0으로 지정하면 글자수의 제한이 없습니다.textCase: 에디터에 입력되는 값을 모두 대문자, 소문자 또는 입력하는대로 표시하도록 할 수 있으며, TextInputCase 속성중 하나를 입력하여 설정할 수 있습니다.textReadOnly: true이면 키보드로 입력이 안되고 선택만 가능하게 됩니다.domainOnly: 목록에 있는 값들만 지정할 수 있는지의 여부를 지정합니다.displayLabels: 목록에labels의 값들을 표시할 것인지values의 값들을 표시할 것인지의 여부를 지정한다. true이면labels의 값을 표시합니다.values: 목록의 실제 값들을 지정합니다.labels: 목록의 표시 값들을 지정합니다.itemSortStyle: 목록의 정렬 방식을 지정합니다.(label 값들을 기준으로 정렬됩니다.) ‘none’, ‘ascending’, ‘descending’caseSensitive: 키 입력시 대소문자 구분 여부를 지정합니다.commitOnSelect: 목록을 선택하였을때 commit 여부를 지정합니다.dropDownCount: 표시될 목록의 개수를 지정합니다. 기본 값은 8 입니다.dropDownWidth: 리스트의 너비를 지정합니다. 0이면 리스트의 내용, -1이면 컬럼 너비에 맞춰집니다.dropDownPosition: 리스트가 펼쳐질 기준을 지정합니다. ‘button’이면 드롭다운 버튼의 오른쪽에, ‘editor’이면 왼쪽에 맞춥니다.
버튼 표시 방법
컬럼 에디터의 type이 ‘date’, ‘dropDown’ 으로 지정되면 컬럼에는 Edit Button 이 표시됩니다.
이 Edit Button의 표시 방법을 지정하는 방법은 두 가지가 있습니다. 둘 중 어떤 방법을 사용해도 상관없지만 더 다양한 표시 방법을 가진 editButtonVisibility 사용을 추천합니다. 아무 속성을 지정하지 않으면 hovering, focused상태에서만 버튼을 표시합니다. Cell Button에 대한 내용은 [B7-6 Cell Button]강좌를 참고하세요.
-
alwaysShowEditButton: 버튼들의 표시 방법을 지정합니다.
– true : 항상 모든 버튼을 표시합니다.
– false : hovering, focused상태에서만 버튼을 표시합니다. -
editButtonVisibility: 버튼들의 표시 방법을 지정합니다.
– ‘always’ : 항상 모든 버튼을 표시합니다.
– ‘default’ : hovering, focused상태에서만 버튼을 표시합니다.
– ‘visible’ : focused된 상태에서만 버튼을 표시합니다.
– ‘hidden’ : 버튼을 표시하지 않습니다.
실습
실습에서는 드롭다운 에디터의 동작을 확인하고 values, labels가 위치한 곳에 따라 동작이 차이가 무엇인지 익혀보도록 하겠습니다.
Edit Button의 표시 방법은 [B7-6 Cell Button]강좌에서 배웠던 alwaysShowButton, buttonVisibility 와 동작이 완벽히 일치하기 때문에 이번 강좌에서는 별도의 실습을 하지는 않도록 하겠습니다.
-
col1, col2 를 아래와 같이 설정합니다. 컬럼 col1은 values, labels 속성이 editor 속성 안에 있고, 컬럼 col2는 values, labels 속성이 editor 속성 바깥에 있는 것을 확인하세요.
{ name: "col1", fieldName: "field1", editor: { type: "dropDown", values: ["sing", "act"], labels: ["가수", "배우"] }, header: { text: "직업" }, styles: { textAlignment: "center" }, width: 70 }, { name: "col2", fieldName: "field2", editor: { type: "dropDown" }, values: ["M", "F"], labels: ["남자", "여자"], header: { text: "성별" }, styles: { textAlignment: "center" }, width: 70 }, -
label 값을 표시하기 위해
lookupDisplay속성값을 true 로 설정합니다.$("#btnSetLookupDisplay").click(function () { gridView.setColumnProperty('col1', 'lookupDisplay', true); gridView.setColumnProperty('col2', 'lookupDisplay', true); }); -
목록에 있는 값들만 지정할 수 있게
domainOnly속성값을 true 로 설정합니다.$("#btnSetDomainOnly").click(function () { gridView.setColumnProperty('col1', 'domainOnly', true); gridView.setColumnProperty('col2', 'domainOnly', true); });
실행화면
-
조회된 화면의 직업과 성별 컬럼의 내용은 label값으로 보이는 것이 아닌 value(조회된 데이터값 그대로)로 보이는걸 확인하세요.
-
직업, 성별 컬럼의 드롭다운버튼을 클릭하여 다른 값으로 바꿔보세요.(드롭다운 목록은 label값으로 보이나 선택하면 value값으로 보입니다)
-
버튼을 클릭하여
lookupDisplay속성 값을 true로 설정합니다. -
성별 컬럼만 label 값으로 보입니다. 차이가 무엇인지 확인해보세요. (values와 labels의 위치가 column에 속하는지 editor에 속하는지의 차이 입니다. 일반적으로 column의 속성으로 작성하며, editor에 속하는 경우 label과 value가 같은 경우 사용합니다. #반드시 그러지 않아도 됩니다.)
-
직업, 성별 컬럼을 선택하고 키보드로 아무 값이나 입력해보세요. 잘 입력됩니다.
-
버튼을 클릭하여
domainOnly속성 값을 true로 설정합니다. -
직업, 성별 컬럼을 선택하고 키보드로 아무 값이나 입력해보세요. 적용이 안됩니다. 목록에 있는 값만 설정 가능한 것을 확인하세요.
전체 소스코드
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_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",
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",
editor: {
type: "dropDown",
values: ["sing", "act"],
labels: ["가수", "배우"]
},
header: {
text: "직업"
},
styles: {
textAlignment: "center"
},
width: 70
},
{
name: "col2",
fieldName: "field2",
editor: {
type: "dropDown"
},
values: ["M", "F"],
labels: ["남자", "여자"],
header: {
text: "성별"
},
styles: {
textAlignment: "center"
},
width: 70
},
{
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 = [
["act", "F", "김도연", "20000101", "70", "90", "70", "1000000", "매우\r\n우수"],
["sing", "F", "이선희", "20000101", "90", "90", "70", "2000000", "아주\r\n우수"],
["act", "F", "하지원", "20000101", "100", "90", "70", "3000000", ""],
["sing", "F", "박정현", "20000101", "90", "90", "70", "100000", ""],
["act", "F", "전지현", "20000101", "100", "90", "70", "100000", ""],
["sing", "M", "성시경", "20000101", "70", "100", "100", "100000", ""],
["sing", "M", "신해철", "20000101", "100", "90", "100", "100000", ""],
["sing", "F", "루시아", "20000101", "100", "100", "100", "100000", ""],
["sing", "M", "윤종신", "20000101", "90", "100", "80", "100000", ""],
["sing", "F", "이소라", "20000101", "100", "80", "100", "100000", ""],
["act", "F", "강소라", "20000101", "90", "100", "70", "100000", ""],
["sing", "M", "타블로", "20000101", "60", "100", "100", "100000", ""],
["sing", "M", "이승환", "20000101", "70", "90", "100", "100000", ""],
["sing", "M", "조규찬", "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
})
//label 값을 표시하기 위해 `lookupDisplay` 속성값을 true 로 설정합니다.
$("#btnSetLookupDisplay").click(function () {
gridView.setColumnProperty('col1', 'lookupDisplay', true);
gridView.setColumnProperty('col2', 'lookupDisplay', true);
});
//목록에 있는 값들만 지정할 수 있게 `domainOnly` 속성값을 true 로 설정합니다.
$("#btnSetDomainOnly").click(function () {
gridView.setColumnProperty('col1', 'editor', {domainOnly: true});
gridView.setColumnProperty('col2', 'editor', {domainOnly: true});
});
});
</script>
HTML
1. 조회된 화면의 직업과 성별 컬럼의 내용은 label값으로 보이는 것이 아닌 value(조회된 데이터값 그대로)로 보이는걸 확인하세요. 2. 직업, 성별 컬럼의 드롭다운버튼을 클릭하여 다른 값으로 바꿔보세요.(드롭다운 목록은 label값으로 보이나 선택하면 value값으로 보입니다) 3. <button type="button" class="btn btn-primary btn-xs" id="btnSetLookupDisplay">lookupDisplay: true</button>버튼을 클릭하여 `lookupDisplay` 속성 값을 true로 설정합니다. 4. 성별 컬럼만 label 값으로 보입니다. 차이가 무엇인지 확인해보세요. (values와 labels의 위치가 column에 속하는지 editor에 속하는지의 차이 입니다. 일반적으로 column의 속성으로 작성하며, editor에 속하는 경우 label과 value가 같은 경우 사용합니다. #반드시 그러지 않아도 됩니다.) 5. 직업, 성별 컬럼을 선택하고 키보드로 아무 값이나 입력해보세요. 잘 입력됩니다. 6. <button type="button" class="btn btn-primary btn-xs" id="btnSetDomainOnly">domainOnly: true</button>버튼을 클릭하여 `domainOnly` 속성 값을 true로 설정합니다. 7. 직업, 성별 컬럼을 선택하고 키보드로 아무 값이나 입력해보세요. 적용이 안됩니다. 목록에 있는 값만 설정 가능한 것을 확인하세요. <div id="realgrid" style="width: 100%; height: 250px;"></div>
데모 사이트
API 참조