自定义单元格编辑器

来自ling
跳转至: 导航搜索
  • 如何使用onGetCellEditor事件自定义单元格的编辑方式。
  • 如何扩展ControlCellRenderer抽象类,并利用其将编辑器直接渲染到表格单元格中。
  • 参考代码
function parseParam(param) {
	if (!param)
		return null;

	var pairs = [];
	param.split(';').each(function(pair) {
		var i = pair.indexOf('='), key, value;
		if (i >= 0 && i < (pair.length - 1)) {
			pairs.push({
				key : pair.substring(0, i),
				value : pair.substring(i + 1)
			});
		} else {
			pairs.push({
				value : pair
			});
		}
	});
	return pairs;
}

function getEditor(entity) {
	var editorType = entity.get("editorType"), param = entity.get("param");
	if (!editorType) {
		return null;
	}
	
	var 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);
		}
	} else if (editor instanceof dorado.widget.DateTimeSpinner) {
		editor.set({
			type : param
		});
	} else if (editor instanceof dorado.widget.CustomSpinner) {
		editor.set("pattern", param);
	}
	return editor;
}

// @Bind #dsRows1.onCreate
// @Bind #dsRows2.onCreate
!function(self) {
	debugger;
	self.setData([ {
		editorType : "TextEditor"
	}, {
		editorType : "TextEditor",
		param : "new=新增;modified=修改;deleted=删除;none=未改变"
	}, {
		editorType : "TextEditor",
		param : "date"
	}, {
		editorType : "TextEditor",
		param : "dateTime"
	}, {
		editorType : "CheckBox"
	}, {
		editorType : "RadioGroup",
		param : "male=男;female=女"
	}, {
		editorType : "NumberSpinner",
		value : 10
	}, {
		editorType : "DateTimeSpinner",
		param : "dateTime",
		value : new Date()
	}, {
		editorType : "CustomSpinner",
		param : "IP: [0,255].[0,255].[0,255].[0,255]",
		value : [ 192, 168, 1, 100 ]
	} ]);
}

// @Bind #grid1.#value.onGetCellEditor
!function(arg) {
	var entity = arg.data, editor = getEditor(entity);
	arg.cellEditor.setEditorControl(editor);
}

// @Bind #grid1.#value.onRenderCell
!function(arg) {
	arg.dom.style.background = "#d5e4fc";
	arg.processDefault = true;
}

// @Bind #buttonAdd1.onClick
!function(dsRows1) {
	dsRows1.getData().insert();
}

// @Bind #buttonDel1.onClick
!function(dsRows1) {
	dsRows1.getData().remove();
}

var CellRenderer = $extend(dorado.widget.grid.SubControlCellRenderer, {
	createSubControl : function(arg) {
		var entity = arg.data;
		var editor = getEditor(entity);
		if (editor) {
			editor.set("width", "100%");
		}
		return editor;
	},
	refreshSubControl : function(editor, arg) {
		if (editor)
			editor.set("value", arg.data.get("value"));
	}
});

// @Bind #grid2.onReady
!function(self) {
	self.set("#value.renderer", new CellRenderer());
}