可变编辑器

Grid默认在光标激活某一个单元格的时候会自动提供数据编辑器：

可以根据需要添加不同类型的编辑器：

TextEditor
TextArea
CheckBox
RadioGroup

添加的方法为在DataColumn下的editor节点下添加对应的编辑器：

以上场景是解决一个DataColumn具有一种编辑器类型的使用方式，这可以满足大多数的要求，但是在一些特殊的场景下，我们希望一个DataColumn列表下的编辑器类型可以根据当前行的数据特征而有所不同，如下图：

我们希望第1，2，3，4行中可变编辑器列的编辑器为TextEditor，而第5行的编辑器为CheckBox,第六行的编辑器类型为RadioGroup,第七行的编辑器类型为NumberSpinner等，对于这种需求我们下面来看如何在Grid中实现。

选择DataColumn的事件面板，可以看到一个叫onGetCellEditor的事件：

我们可以在该事件中实现自定义的编辑器的控制：

var editor = new dorado.widget.TextEditor();
arg.cellEditor.setEditorControl(editor);

如果要创建checkbox则可以通过如下代码实现：

var editor = new dorado.widget.CheckBox();
arg.cellEditor.setEditorControl(editor);

多种混合模式代码为：

var editor = null;
var entity = arg.data;
var editorType = entity.get("editorType");
if (editorType) {
	editor = eval("new dorado.widget." + editorType + "()");
	if (editor instanceof dorado.widget.TextEditor) {
		if (param) {
			var trigger;
			if (param == "date") {
				trigger = "defaultDateDropDown";
			} else if (param == "dateTime") {
				trigger = "defaultDateTimeDropDown";
			} else {
				trigger = new dorado.widget.ListDropDown({
					items : parseParam(param),
					property : "value"
				});
			}
			editor.set("trigger", trigger);
		}
	} else if (editor instanceof dorado.widget.CheckBox) {
		editor.set("exClassName", "d-checkbox-center")
	} else if (editor instanceof dorado.widget.RadioGroup) {
		editor.set("layout", "flow");
		if (param) {
			var radioButtons = [];
			parseParam(param).each(function(pair) {
				radioButtons.push({
					value : pair.key,
					text : pair.value
				});
			});
			editor.set("radioButtons", radioButtons);
		}
	}
}
arg.cellEditor.setEditorControl(editor);

自定义渲染器

另外我们还可以自定义单元格的渲染器，默认情况下单元格的渲染器都是文本显示，但是我们也可以把Grid的渲染器做调整，以出现如下的效果：

与上面只有光标激活一个单元格的时候才出现编辑器不同，本例在光标激活单元格之前就能看到相关单元格对应的编辑器对象。

当然实际使用中我们不一定要将单元格渲染为编辑器，也可以渲染为别的，例如图片超链接等，这些范例可以参考sample-center中自定义渲染的表格

本例渲染为编辑器的基本用法为:实现DataColumn的自定义的渲染器。

自定义渲染器需要继承ControlCellRenderer对象，如：

var CellRenderer = $extend(dorado.widget.grid.SubControlCellRenderer, {
	createSubControl : function(arg) {
		var editor = new dorado.widget.TextEditor();
		return editor;
	}
});

也可以创建别的控件,如创建Checkbox：

var CellRenderer = $extend(dorado.widget.grid.SubControlCellRenderer, {
	createSubControl : function(arg) {
		var editor = new dorado.widget.CheckBox();
		return editor;
	}
});

创建好新的CellRenderer之后，我们只需要将这个CellRenderer配置到对应的DataColumn中就可以：

datagrid.set("&myDataColumn.renderer", new CellRenderer());

其中myDataColumn是DataGrid中的一个DataColumn的名称。

另外为了实现数据绑定：当DataSet中的数据发生了变化(不一定是直接通过当前的Grid编辑触发的，有可能是表单中编辑，也有可能在一个按钮的单击事件中通过js代码修改了DataSet的内部数据)，我们希望Grid中自定义的编辑器的内容可以自适应的发生变化，则我们还需要实现ControlCellRenderer的一个事件，如：

var CellRenderer = $extend(dorado.widget.grid.SubControlCellRenderer, {
	createSubControl : function(arg) {
		var editor = new dorado.widget.TextEditor();
		return editor;
	},
	refreshSubControl : function(editor, arg) {
		if (editor)
			editor.set("value", arg.data.get("myPropertyDef"));
	}
});

datagrid.set("&myDataColumn.renderer", new CellRenderer());

其中refreshControl事件是由DataGrid主动触发的，当它感知到当前DataSet中的数据发生变化的时候就会自动触发refreshSubControl，并且其中的arg.data就代表了DataSet的当前实体对象。myPropertyDef为与myDataColumn对应的DataType中的某一个PropertyDef。

Dorado 9 : 自定义单元格编辑器(sample-center)

可变编辑器

自定义渲染器

Attachments: