RealGrid HELPB7-10 편집기(Editors) III - Search Editor
들어가며
이번 강좌에서는 입력한 값과 관련된 항목을 조회하여 리스트에 표시할 수 있는 Search Editor에 대하여 알아보도록 하겠습니다.
이론
RealGrid는 데이터 셀의 값을 수정할 수 있는 기본적인 편집기(Cell Editor)외에도 부분검색을 하여 리스트에 표시해주는 Search Editor 도 제공하고 있습니다. Search Editor를 사용하기 위한 속성과 콜백 함수를 알아보고 동작 방법에 대하여 알아보도록 하겠습니다.
편집기(Cell Editor)의 종류
Search Editor
type이 ‘search’로 지정되면 해당컬럼은 Search Editor로 동작을 하게 됩니다.
Search Editor로 지정되었다고 해서 키 입력시 RealGrid가 자동으로 검색해서 보여주진 않습니다. 찾아야할 대상과 목록은 개발자가 지정해서 보여줘야 합니다.
먼저 Search Editor 에서 사용하는 속성과 함수를 알아보고, 그 후 동작 순서에 대해 알아보도록 하겠습니다.
type: ‘search’로 지정합니다.searchLength: 검색이 시작될 최소 길이를 지정합니다. 기본값 1 입니다.searchDelay: searchLength의 길이가 만족한 이후 얼마 후에 검색이 시작될 것인지 대기 시간을 지정 합니다.
대기 시간중 문자가 입력되면 타이머는 리셋됩니다. 단위는 ms, 기본값 1000 ms 입니다.dropDownCount: 표시될 목록의 수를 지정한다. 기본값은 8 입니다.useCtrlEnterKey:searchLength,searchDelay상관 없이 바로Ctrl+Enter키로 검색을 검색을 시작하고 싶을 때 true 로 지정합니다.useEnterKey:searchLength,searchDelay상관 없이 바로Enterkey로 검색을 검색을 시작하고 싶을 때 true 로 지정합니다. 단 목록이 비어 있는 경우에만 동작합니다.
함수 및 콜백함수
-
GridView.onEditSearch(id, index, text) :
searchLength와searchDelay가 만족하거나 Enter, Ctrl+Enter 키 입력으로 즉시 검색이 실행됐을때 호출됩니다.
– id : Grid 컨트롤 넘어옵니다.
– index : 변경된 CellIndex 정보가 넘어옵니다.
– text : 편집전 셀의 데이터 값이 넘어옵니다. -
GridBase.fillEditSearchItems(column, searchKey, values, labels) : 검색된 데이터들을 목록에 채우고 보여줄때 사용합니다. onEditSearch 콜백함수 안에서 사용합니다.
– column : list가 표시될 컬럼의 name 또는 Column객체를 지정합니다.
– searchKey : 검색 키 값을 지정합니다.
– values : 검색된 values 값을 지정합니다.
– labels : 검색된 labels 값을 지정합니다.
동작 순서
사용자가 Search Editor 로 지정된 컬럼 셀에서 검색 키를 입력 한 후 searchLength + searchDelay 조건이 만족하거나 Ctrl + Enter키나 Enter키를 입력했을때 onEditSearch() 콜백함수가 호출 됩니다. 이 콜백 함수 안에서 입력된 키 값으로 조건에 맞는 문자열들을 찾아 fillEditSearchItems() 함수를 통해 검색목록을 채워주면 됩니다.
실습
실습에서는 Search Editor 의 동작 순서를 확인하고, 검색하고 목록을 채우는것에 대해 알아보도록 하겠습니다. 이름 컬럼을 Search Editor로 하는 것이 적절하진 않지만 실습 편의상 그렇게 하겠습니다.
-
이름 컬럼의 editor를 타입을
search로 선언합니다.{ name: "col3", fieldName: "field3", editor: { type: "search", searchLength: 1, searchDelay: 1000, useCtrlEnterKey: true, useEnterKey: true }, header: { text: "이름" }, styles: { textAlignment: "center" }, width: 50 }, -
콜백함수 onEditSearch() 를 정의합니다. 전체 목록이 정해져 있다면 직접 변수에 정의해도 되고, 전체 목록이 유동적이라면 dataProvider.getDistinctValues()를 사용하여 목록을 가져와도 됩니다. 이 실습에서는 직접 변수에 전체 목록을 대입 했습니다.
$("#btnSetOnEditSearch").click(function () { var CustomerNames = ["김도연","이선희","하지원","박정현","전지현","성시경","신해철","루시아","윤종신","이소라","강소라","타블로","이승환","조규찬"]; 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); gridView.fillEditSearchItems(index.column, text, items); }; }); -
이름 컬럼의 searchLength 를 2로 변경합니다.
$("#btnSetColumnProperty").click(function () { gridView.setColumnProperty('col3', 'editor', {searchLength: 2}); });
실행화면
-
이름 컬럼에서 ‘이’를 입력해 봅니다. onEditSearch() 콜백함수가 정의되지 않았기 때문에 아무런 변화가 없습니다.
-
onEditSearch() 를 정의합니다.
-
이름 컬럼에서 다시 ‘이’를 입력해 봅니다. ‘이’로 시작하는 사람들의 이름이 목록에 표시됩니다.
-
searchLength 를 2로 변경.
-
다시 한번 이름 컬럼에 ‘이’를 입력해 봅니다. 이번에는 아무런 반응이 없습니다. (searchLength: 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_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",
values: ["sing", "act"],
labels: ["가수", "배우"],
lookupDisplay: true,
editor: {
type: "dropDown"
},
header: {
text: "직업"
},
styles: {
textAlignment: "center"
},
width: 70
},
{
name: "col2",
fieldName: "field2",
editor: {
type: "dropDown"
},
values: ["M", "F"],
labels: ["남자", "여자"],
lookupDisplay: true,
header: {
text: "성별"
},
styles: {
textAlignment: "center"
},
width: 70
},
{
name: "col3",
fieldName: "field3",
editor: {
type: "search",
searchLength: 1,
searchDelay: 1000,
useCtrlEnterKey: true,
useEnterKey: true
},
header: {
text: "이름"
},
styles: {
textAlignment: "center"
},
width: 80
},
{
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
})
//부분검색시 사용하는 onEditSearch 콜백 함수를 정의
$("#btnSetOnEditSearch").click(function () {
var CustomerNames = ["김도연","이선희","하지원","박정현","전지현","성시경","신해철","루시아","윤종신","이소라","강소라","타블로","이승환","조규찬"];
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);
gridView.fillEditSearchItems(index.column, text, items);
};
});
//이름 컬럼의 searchLength 를 2로 변경합니다.
$("#btnSetColumnProperty").click(function () {
gridView.setColumnProperty('col3', 'editor', {searchLength: 2});
});
});
</script>
HTML
1. 이름 컬럼에서 '이'를 입력해 봅니다. onEditSearch() 콜백함수가 정의되지 않았기 때문에 아무런 변화가 없습니다. 2. <button type="button" class="btn btn-primary btn-xs" id="btnSetOnEditSearch">onEditSearch</button> onEditSearch() 를 정의합니다. 3. 이름 컬럼에서 다시 '이'를 입력해 봅니다. '이'로 시작하는 사람들의 이름이 목록에 표시됩니다. 4. <button type="button" class="btn btn-primary btn-xs" id="btnSetColumnProperty">searchLength: 2</button> searchLength 를 2로 변경. 5. 다시 한번 이름 컬럼에 '이'를 입력해 봅니다. 이번에는 아무런 반응이 없습니다. (searchLength: 2 로 했기 때문에 두 글자이상을 입력해야 검색이 시작됩니다.) 5. '이' 다음에 '승' 을 입력하면 '이승환'이 표시되는 것을 확인하세요. <div id="realgrid" style="width: 100%; height: 250px;"></div>
데모 사이트
API 참조