기본 편집기
리얼그리드는 라인, 멀티라인, 드롭다운, 날짜, 검색 등의 다양한 형태의 편집기를 제공 하고 있습니다.
pivot, grid, 피벗, 필터, filter
pivot, export
pivot, style, callback, styleCallback
pivot, value, getCellValue
pivot, pivotFields, getPivotFields
라인 편집기는 한 줄 텍스트를 입력할 수 있는 기본 에디터입니다.
normal upper lower
1
2
var textCase = $(':radio[name="rbTextCase"]:checked').val()
gridView.setColumnProperty("OrderID", "editor", {"textCase": textCase});
멀티라인 편집기는 라인 구분자로 나누어지는 여러 줄의 텍스트를 입력할 수 있습니다. 입력되는 텍스트에 맞춰 편집기의 크기가 조정됩니다. Ctrl+Enter로 줄 나누기를 할 수 있습니다.
styles의 textWrap 속성을 반드시 지정해주어야 하며 explicit 인 경우 문자열 내에 명시적으로 행바꿈(\n) 코드가 있을 경우 행바꿈이 이루어지고 normal인 경우 문자열이 컬럼의 폭보다 긴 경우 자동으로 줄 행바꿈이 이루어 집니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
...
//컬럼설정
{
"name": "CompanyName",
"fieldName": "CompanyName",
"width": "200",
"editor": {
"type": "multiline",
"textCase": "upper"
},
"styles": {
"textAlignment": "near",
"textWrap": "normal" //"normal" or "explicit"
},
"header": {
"text": "Multiline Edit",
"styles": {
"background": "linear,#22ffd500,#ffffd500,90"
}
}
}
...
altEnterNewLine속성을 true로 설정하면 alt+enter키 입력시 줄바꿈을 합니다.
1
2
3
4
5
gridView.setColumnProperty("CompanyName","editor", {
"type": "multiline",
"textCase": "upper",
altEnterNewLine:true
})
숫자 편집기는 숫자를 입력할 수 있는 편집기 입니다.
천단위 구분기호를 표시하고 싶은 경우 styles.numberFormat을 “#,##0” 로 설정하면 되고, 고정 소수점 사용시에는 필요한 자릿수만큼 소수점 이후에 “0”을 표시, 가변 소수점 사용시에는 “#”을 사용합니다.
예를 들어 천단위 구분기호를 사용하고 고정 소수점 3자리를 사용할 경우 “#,##0.000” 를 사용하면 됩니다.
editor.editFormat을 “#,##0.##”로 지정한 경우 소수점이하 자리는 최대 2자릿수만큼만 입력됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
...
//컬럼설정
{
"name": "Quantity",
"fieldName": "Quantity",
"width": "100",
"sortable": false,
"editor": {
"type": "number",
"textAlignment": "far",
"editFormat": "#,##0.##",
"multipleChar": "+",
},
"styles": {
"textAlignment": "far",
"numberFormat": "#,##0.##"
},
"header": {
"text": "Number Edit",
"styles": {
"background": "linear,#22ffd500,#ffffd500,90"
}
}
}
...
일부 국가에서는 천단위 구분기호 ‘,’와 소수점 ‘.’을 반대로 사용하는 경우가 있습니다.(천단위 구분기호 ‘.’, 소수점 ‘,’)
이 경우 format 문자열을 ; 으로 구분하여 첫번째는 숫자를 표현하는 형식을 두번째는 소숫점 기호를 세번째는 천단위 구분기호를 지정합니다.
1
numberFormat: "#,##0.##;,;." //12345.67 인 경우 12.345,56 으로 표시
입력시 에디터에도 같은 포맷을 가지려면 동일하게 지정하면 됩니다.
1
editFormat: "#,##0.##;,;." //12345.67 인 경우 12.345,56 으로 표시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var column = [
...
{
"name": "Quantity",
"fieldName": "Quantity",
"width": "100",
"sortable": false,
"editor": {
"type": "number",
"textAlignment": "far",
"editFormat": "#,##0.##;,;.",
"multipleChar": "+",
},
"styles": {
"textAlignment": "far",
"numberFormat": "#,##0.##;,;."
},
"header": {
"text": "Number Edit",
"styles": {
"background": "linear,#22ffd500,#ffffd500,90"
}
}
}
...
];
드롭다운 편집기 는 values속성으로 지정된 목록 중 한 값을 선택합니다. 또한, labels에 values 대신 드롭다운 리스트에 표시될 텍스트들을 지정할 수 있습니다.
labels의 항목 수가 values 항목 수 이상이어야 하고, 에디터에 values를 지정하지 않으면 컬럼에 지정된 values, labels 목록이나 lookupSource의 목록을 대신 사용합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
...
//컬럼설정
{
"name": "CustomerID",
"fieldName": "CustomerID",
"width": "150",
"sortable": false,
"lookupDisplay": true, //라벨로 표시
"values": ["VINET", "HANAR", "SUPRD", "VICTE", "THREE", "SEVEN"],
"labels": ["<VINET>", "<HANAR>", "<SUPRD>", "<VICTE>", "<THREE>", "<SEVEN>"],
"editor": {
"type": "dropDown",
"dropDownCount": 4
},
"styles": {
"textAlignment": "center"
},
"header": {
"text": "DropDown Edit",
"styles": {
"background": "linear,#22ffd500,#ffffd500,90"
}
}
}
...
domainOnly가 true이면 목록에 있는 값들만 선택할 수 있습니다.
textReadOnly가 true이면 키 입력이 안되며 선택만 할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
...
//컬럼설정
{
"name": "CustomerID2",
"fieldName": "CustomerID",
"width": "150",
"sortable": false,
"editor": {
"type": "dropDown",
"dropDownCount": 4,
"domainOnly": true,
"textReadOnly": true,
"values": ["VINET", "HANAR", "SUPRD", "VICTE", "THREE", "SEVEN"],
"labels": ["<VINET>", "<HANAR>", "<SUPRD>", "<VICTE>", "<THREE>", "<SEVEN>"]
},
"styles": {
"textAlignment": "center"
},
"header": {
"text": "Domain Only",
"styles": {
"background": "linear,#22ffd500,#ffffd500,90"
}
}
}
...
검색 편집기는 설정된 값 중에 일치되는 값이 드롭다운 목록에 표시되는 에디터 이다. 검색이 시작되면 gridView.onEditSearch() 이벤트가 발생하며, 이 이벤트 내에서 검색 처리 후 gridView.fillEditSearchItems()을 실행해 드롭다운 목록을 채워준다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
...
var CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];
gridView.onEditSearch = function (grid, index, text) {
console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
var items = CustomerNames.filter(function (str) {
return str.indexOf(text) == 0;
});
console.log(items);
grid.fillEditSearchItems(index.column, text, items);
};
...
//컬럼설정
{
"name": "CustomerID3",
"fieldName": "CustomerID",
"width": "150",
"sortable": false,
"editor": {
"type": "search",
"searchLength": 1,
"searchDelay": 1000,
"useCtrlEnterKey": true,
"useEnterKey": true
},
"styles": {
"textAlignment": "center"
},
"header": {
"text": "Search Editor ",
"styles": {
"background": "linear,#22ffd500,#ffffd500,90"
}
}
}
...
날짜 편집기를 사용하면 키보드로 날짜를 입력하거나 달력 팝업을 사용하여 날짜를 선택할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
...
//컬럼설정
{
"name": "OrderDate",
"fieldName": "OrderDate",
"width": "180",
"sortable": false,
"editor": {
"type": "date",
"datetimeFormat": "yyyy.MM.dd"
},
"styles": {
"textAlignment": "center",
"datetimeFormat": "yyyy.MM.dd"
},
"header": {
"text": "Date Edit",
"styles": {
"background": "linear,#22ffd500,#ffffd500,90"
}
}
}
...
minDate, maxDate를 지정하여 특정기간만 선택할 수 있습니다.
1
2
3
4
5
6
gridView.setColumnProperty("OrderDate","editor", {
"type": "date",
"datetimeFormat": "yyyy.MM.dd",
"minDate": new Date("1996-07-1"),
"maxDate": new Date("1996-07-30")
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var holidays = [ {
type : "day", // 요일을 지정합니다.
days : [0,6], // 일요일,토요일
styles : {foreground:"#FFFF0000"}, // 배경색과 폰트색을 지정합니다.
tooltips : ["일요일","토요일"], // tooltip
enabled : true // false인경우 선택할수 없습니다.
}, {
type : "date", // 기념일 또는 특정일자를 지정합니다.
dates : ["01-01","03-01","05-05","08-15"], // 기념일.
styles:{foreground:"#FF000000"},
tooltips : ["신정","삼일절","어린이날","광복절"]
}, {
type:"date", // 동일한 type을 중복해서 지정할수 있습니다.
dates:["2019-05-06"],
styles:{foreground:"#FFFF0000", background:"#10FF0000"},
tooltips:["어린이날 대체휴무"]
}
];
gridView.setColumnProperty("OrderDate","editor",{type:"date",holidays:holidays})
편집 정렬
Text editor컬럼에 편집시 가운데 정렬을 설정합니다.
1
gridView.setColumnProperty("OrderID","editor",{textAlignment:"center"});