根据不同的数据显示不同的行底色

行底色效果图

grid组件提供了rowAttr属性——行属性表达式，表达式执行结果返回Object，可以包含style、class属性，也可以增加自定义属性。表达式中可以使用$model,$row(当前渲染的数据行对象)变量

下面的代码实现了上图的效果，当数量等于1时显示粉底色，否则显示黄底色

$row.val('fSL')=='1'?{style:'background:pink;'}:{style:'background:yellow;'}

有些遗憾的是，修改数据后，不会刺激执行，弥补的方法是接管data组件的onValueChanged事件，使用grid组件的setRowCss方法设置行底色，代码如下


	Model.prototype.detailDataValueChanged = function(event){
		if(event.col=='fSL'){
			var rowid = this.comp('detailData').getRowID(event.row);
			if(event.value=='1'){
				this.comp('detailGrid').setRowCss(rowid,{background:'pink'});
			}else{
				this.comp('detailGrid').setRowCss(rowid,{background:'yellow'});
			}
		}
	};

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443