SMART datagrid v1.4 > Examples

Back  Forward

List Cell Editors  Example

리스트 셀 에디터는 선택 가능한 값들을 미리 드랍다운 리스트에 표시하고, 반드시 그 값들 중 하나를 선택하거나 입력을 위한 참조값들로 사용할 수 있도록 한다. SMART datagrid 모듈에는 ListCellEditorSearchCellEditor 두 종류의 리스트 에디터가 존재한다. 

리스트 편집기들은 TextCellEditor를 계승하므로, maxLength 등 TextCellEditor의 속성들을 사용할 수 있다. 텍스트 편집기 예제를 참조한다. 

1. Dropdown List CellEditor

ListCellEditor를 편집기로 사용하기 위해서는 컬럼 editor에 type을 "list"로 지정한다. 그리고, 편집기의 dropdown 리스트에 표시될 항목들은 우선 values 속성으로 지정한다. 

Code -1
    {
    	"fieldName": "country",
    	"editor": {
    	    "type": "list",
    	    "values": ["Albania", "Chile", "Colombia", "Denmark", "Finland", "France"]
    	}
    }

편집기에서 텍스트를 입력하거나 셀 오른쪽 버튼을 클릭하면 리스트가 표시된다. 이 때, ListCellEditor.domainOnlytrue면 사용자는 리스트 항목들 중 하나를 선택해야 하고, 항목에 없는 값을 입력하면 무시된다. 아래 DomainOnly 컬럼에서 확인한다. 또, 편집기의 "values" 대신 컬럼의 lookupValues에 항목들이 설정되면 그 값들이 리스트에 표시된다. 

Code -2
    {
    	"fieldName": "country",
        "lookupValues": ["Albania", "Chile", "Colombia", "Denmark", "Finland", "France"]
    	"editor": {
    	    "type": "list",
    	    "domainOnly": true
    	}
    }

에디터의 labels나, 컬럼의 lookupLabels에 values와 같은 개수의 항목들을 설정하면 실제 값 대신 다른 값들을 리스트에 표시할 수 있다. 또, 컬럼의 lookupDisplaytrue로 지정하고, lookupValues, lookupLabels르 지정하면, 편집기 뿐 아니라 데이터셀에도 값대신 label이 표시된다. 

Code -3
    {
        "lookupDisplay": true,
        "lookupLabels": ["in", "out"],
        "lookupValues": ["Import", "Export"],
        "editor": {
            "type": "list",
            "domainOnly": true
        }
    }

ListCellEditor를 다중 선택이 가능한 편집기로 사용하기 위해서는 컬럼 editor에 type을 "multilist"로 지정한다. 해당 type을 사용 시 편집기의 dropdown 리스트에서 다중 항목에 대한 선택이 가능하다. dropdown 리스트 내에는 지정된 항목 외 전체 선택 항목이 존재하며, 해당 항목 선택 시 dropdown 리스트 내 모든 항목이 선택된다. 해당 컬럼에 대한 값은 String 타입으로 선택된 한개 이상의 항목의 value 사이에 multipleSeparator 값이 추가되어 각 value의 구분값으로 표시된다. (1.4.7 버전 이상) 

Code -4
    "editor": {
	    "type": "multilist",
        "values": ["500600", "500720", "500710", "500790"],
        "labels":  ["500600", "500720", "500710", "500790"],
	    "multipleSeparator": "/"
	}
Grid - 1
0 rows

"List" 컬럼에서 대소문자를 구분해서 찾는다. 

"List" 컬럼에서 중간에 일치하는 문자열이 있어도 찾는다. 

2. Search CellEditor

SearchCellEditor의 type은 "search"로 지정한다. 기본 기능은 ListCellEditor와 동일하고, 사용자의 입력에 따라 지정한 시점에 이벤트를 발생시켜서 리스트의 항목을 동적으로 변경할 수 있는 기능이 추가된 편집기다. 

아래 그리드에서 "국가" 컬럼이 search 편집기로 설정되었다. keyLength 길이 이상 문자가 입력된 후, searchDelay 밀리초 이상 시간이 지나면 GridBase.onEditSearch 이벤트가 발생한다. 이벤트 핸들러 내에서 GridBase.fillEditSearchItems 메소드를 이용해서 리스트의 항목들을 갱신한다. 

Code -5
    var countries = [
        "Algeria", "Argentina", "Australia", "Austria",
        ...
    ];
    grid.onEditSearch = function (grid, index, key) {
        key = key.toLowerCase();
        var items = countries.filter(function (s) {
            return s.toLowerCase().indexOf(key) == 0;
        });
        grid.fillEditSearchItems(index.column, key, items);
    }

   

SearchCellEditor.requestWhenCtrlEnterrequestWhenEnter 속성을 설정해서, ctrl+enter 키나, enter 키를 누를 때 keyLength나 searchDelay와 상관없이 다시 이벤트를 발생시키도록 할 수 있다. ctrl+enter 설정이 우선한다. 

  

Grid - 2
0 rows

소스보기 JSP 

See Also
ListCellEditor
SearchCellEditor
DataColumn.editor
GridBase.onEditSearch
GridBase.fillEditSearchItems
EditOptions
GridBase.editOptions
Examples
List Editors 2
Text Cell Editors
Number Cell Editor
Date Cell Editor
셀 편집