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

行底色效果图

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