SMART datagrid v.1 > Examples

Back  Forward

List Editor Styles & Items  Example

1. DropDownList Item Styles

可以在ListCellEditor.listItemStyles中,指定显示在下拉列表框中的项的样式。 

Code -1
    var columns = [{
    	"name": "Country",
    	"editor": {
    	    "type": "list",
    	    "listItemStyles": {
    	        "selectedBackground": "#008",
    	        "selectedColor": "#ff0",
    	        "hoveredColor": "#f00",
    	        "hoveredBackground": "#10000000"
    	    }
    	}
    },
    ...
Grid - 1
0 rows
2. Items Callback

如果使用ListCellEditor.itemsCallback,可以在运行时间,动态构成列表项。 在下列例题中,将会根据"进出口"列的值,区分显示"产品代码"列的列表编辑器的项目。 

Code -2
    var columns = [{
        name: "CommCode",
        editor: {
            type: "list",
            itemsCallback: function (index) {
                var items = { values: [], labels: [] }
                if (index.getRow().getValue('flow') == 'Import') {
                    items.values.push('500001', '500002', '500003', '500004', '500005');
                    items.labels.push('import 1', 'import 2', 'import 3', 'import 4', 'import 5');
                } else {
                    items.values.push('900001', '900002', '900003', '900004', '900005');
                    items.labels.push('export 1', 'export 2', 'export 3', 'export 4', 'export 5');
                }
                return items;
            }
        }
    },
    ...
Grid - 2
0 rows
3. Lookup Tree

我们也可以使用LookupTree,构成列表编辑器的目录。 另外,除了可以提供列表目录以外,LookupTree也可以在数据单元格上,替代实际值而显示已查找的值。 如果是可以构成定型化的Keys/Value组的情况,推荐使用LookupTable。 

Grid - 3
0 rows

查看源代码 JSP 

See Also
ListCellEditor
ListCellEditor.listItemStyles
ListCellEditor.itemsCallback
LookupTree
Examples
列表编辑器
列表编辑器2
列表编辑器的两个值
单元格编辑