Dorado 9 : 自定义渲染的表格(sample-center)

自定义渲染的表格是指对表格中单元格的现实内容根据自己的需要做显示上的调整，如本例的Grid:

在这个Grid中我们可以看到此表格做了以下的自定义：
1. Pic列可显示产品图片，且当鼠标移动到该列时可以显示出产品的大图。
2. 当Price列大于3000时将显示为黑体。
3. 当Storage列小于50时将显示为红色黑体。
4. 正以折扣价销售的产品行将显示为特别的底色。
5. Volumn列将三个属性的值合并显示在一起。
6. Storage列可使用NumberSpinner进行编辑。
7. Type列使用RadioGroupCellRenderer进行渲染。
8. 每一行的第一列利用ControlCellRenderer在单元格中渲染了按钮。
9. 自定义了Price和Storage列的列尾单元格的渲染方式。
10. 第一列的列头中渲染了按钮。

单元格定制(onRenderCell)

一般来说自定义Grid中单元格的内容，我们可以通过DataColumn的onRenderCell方法实现：

如果想设置图片效果，可以在onRenderCell中写如下的JS代码：

$(arg.dom).empty().xCreate({
	tagName: "IMG",
	src: $url(">dorado/res/com/bstek/dorado/sample/data/images/" + arg.data.get("product") + "-24.png"),
	style: "margin: 2px"
});

其中arg.dom在onRenderCell中代表这个单元格对应的DOM对象，而arg.data则代表了DataSet中对应的Entity对象。

利用xCreate方法，我们可以根据我们的需要加入各种类型的DOM对象，从而做出我们想要的效果，如我们希望显示一个超链接，则可以将代码调整为：

$(arg.dom).empty().xCreate({
	tagName: "A",
	href: $url(arg.data.get("URL")),
	target: "_blank",
	content: "Click Me"
});

如果想设置背景色，则可以通过调整的background实现：

arg.dom.style.background = (arg.data.get("price") > 3000) ? "#fcc5c5" : "";
arg.processDefault = true;

如果想调整dom的风格，可以通过arg.dom.style实现(本例为调整字体颜色)：

arg.dom.style.color = (arg.data.get("storage") <= 50) ? "red" : "";
arg.processDefault = true;

如果想自定义文本内容可以通过如arg.dom.innerText的设定实现(本例为将多个属性合并显示)：

var entity = arg.data;
arg.dom.innerText = entity.get("length") + " x " + entity.get("width") + " x " + entity.get("height");

与onRenderCell类似的DataColumn还提供了onRenderHeaderCell和onRenderFootCell分别用于设定表格列的列头和列尾：

其内部的代码技巧与上面onRenderCell事件代码基本类似。

表格行Style定制(onRenderRow)

除了可以通过DataColumn的onRenderCell定制单元格内容之外，我们还可以通过DataGrid的onRenderRow事件定制表格行的特性，一般来说我们可以通过这个事件定制表格行的style特性，如背景色：

arg.dom.style.background = (arg.data.get("price")>3000) ? "#d5e4fc" : "";

CellRenderer定制(高级定制)

另外我们还可以利用Grid自身提供的CellRenderer处理机制，定义自己的CellRenderer，并与相关的DataColumn绑定，这样DataColumn就会以你自定义的CellRenderer的渲染机制实现单元格内容的渲染(要求对DHTML有一定了解)

基本代码为：

var OperationCellRenderer = $extend(dorado.widget.grid.SubControlCellRenderer, {
	createSubControl: function(arg) {
		//创建单元格内部的DOM元素
	},
	
	refreshSubControl: function(button, arg) {
		//当渲染单元格时触发，在这个事件中可以通过arg.data获取当前的实体对象
	}
});

self.set("&operation.renderer", new OperationCellRenderer());//最后设置名称为operation的DataColumn的渲染器为自定义的OperationCellRenderer

例如本例中折扣列的代码定义：

var OperationCellRenderer = $extend(dorado.widget.grid.SubControlCellRenderer, {
	createSubControl: function(arg) {
		if (arg.data.rowType) return null;
		
		return new dorado.widget.Button({
			toggleable: true,
			onClick: function(self) {//定义按钮的单击事件
				var entity = arg.data, originPrice, price;
				if (self.get("toggled")) {
					originPrice = entity.get("price");
					price = parseInt(originPrice * 0.8);
					entity.set({
						discount: true,
						price: price,
						originPrice: originPrice
					});
				}
				else {
					originPrice = entity.get("price");
					price = entity.get("originPrice");
					entity.set({
						discount: false,
						price: price
					});
				}
				dorado.widget.NotifyTipManager.notify(entity.get("product") + "的价格已由" + originPrice + "调整为" + price + "!");
			}
		});
	},
	
	refreshSubControl: function(button, arg) {
		var storage = arg.data.get("storage");//获取实体对象的库存信息
		button.set({
			caption: (storage > 0) ? "折扣" : "无货",
			disabled: !(storage > 0),
			toggled: arg.data.get("discount")
		});
	}
});

self.set("&operation.renderer", new OperationCellRenderer());

Dorado 9 : 自定义渲染的表格(sample-center)

单元格定制(onRenderCell)

表格行Style定制(onRenderRow)

CellRenderer定制(高级定制)

Attachments: