SMART datagrid v.1 > Examples

Back  Forward

List Cell Editors  Example

列表单元格编辑器在下拉列表中预先显示可选择的值,以便可以使从中选择一个值或将其使用为输入时的参考值。 SMART datagrid格模块中,有ListCellEditorSearchCellEditor等两种列表编辑器。 

因为列表编辑器继承TextCellEditor,所以可以使用maxLength等TextCellEditor的属性。 请参考文本编辑器例题。 

1. Dropdown List CellEditor

为了使用ListCellEditor为编辑器,需要在列的editor中,将type指定为"list"。 而且,首先需要通过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相同数量的项, 就可以在列表中,替代实际值而显示其他值。 另外,如果将列的lookupDisplay指定为true并指定lookupValues和lookupLabels, 就可以在包含编辑器的数据单元格上,显示替代值的label。 

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

"List"列中进行搜索时,区分大小写。 

即使中间有相同的字符串,也会在"List"列中进行搜索。 

2. Search CellEditor

SearchCellEditor的类型是由"search"所指定的。 它的基本功能与ListCellEditor相同,是一种添加了可以根据用户输入,在指定时点,通过触发事件而动态变更列表项的功能的编辑器。 

下列网格中,已通过search编辑器设置了"国家"列。 当输入keyLength长度以上的文本后,经过searchDelay毫秒以上时间, 就会触发GridBase.onEditSearch事件。 在事件处理器中,通过使用GridBase.fillEditSearchItems方法,更新列表的项。 

Code -4
    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+enterenter键时, 可以再次触发与keyLength或searchDelay无关的事件。 这时,将会优先使用ctrl+enter设置。 

  

Grid - 2
0 rows

查看源代码 JSP 

See Also
ListCellEditor
SearchCellEditor
DataColumn.editor
GridBase.onEditSearch
GridBase.fillEditSearchItems
EditOptions
GridBase.editOptions
Examples
列表编辑器2
文本单元格编辑器
数字单元格编辑器
日期单元格编辑器
单元格编辑