layui数据表格根据字段信息设置行背景色

  //加载渲染
$(document).ready(function() {
	table.render({
		url : basePath+"payment/queryPaymentInfo",
		elem:'#content_table',
		id:"content_table",
		method:'POST',
	    page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
	        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
	        //,curr: 5 //设定初始在第 5 页
	        ,groups: 1 //只显示 1 个连续页码
	        ,theme: '#e6a3a3'
	        ,first: false //不显示首页
	        ,last: false //不显示尾页
	      },
		limit:10,
		limits:[10,20,50], //这里设置可选择每页显示条数
		cols: [[
		       {type: 'checkbox',style:'margin-top:2px'}
		      ,{field:'payId', title: '主键',hide:true,align:'center'}			
		      ,{field:'payType',title: '支付方式',align:'center',templet:function(d){
		    	  if(!isEmpty(PAY_TYPE)) return PAY_TYPE[d.payType];}}
		      ,{field:'userPhone',title: '联系方式',align:'center',templet:function (d) { 
		    	  return isEmpty(d.userPhone)?"散客":d.userPhone;}}
		      ,{field:'open',title: '交易状态',align:'center',templet:function(d){
		    	  if(!isEmpty(PAY_STATUS)) return PAY_STATUS[d.open];}}
		      ,{fixed:'right',title:'操作', align:'center',toolbar:'#barOption'}//操作栏
		    ]],
		    response:{statusName:"errorCode",statusCode:"10000",dataName:"rows",count:"count"},
		   done: function (res,curr,count) {
    			setColor('.show_content .layui-table');
		    }
			
	});
});
function setColor(tableClassName){
		var $table = $(tableClassName).eq(1);
		if($table.length > 0){
		//遍历所有行
			$table.find('tr').each(function(){
				var open = $(this).find('td[data-field="open"]').attr('data-content');
				if(open == "2"){   //给状态为2的数据行设置背景色
					$(this).attr('style',"background:#f1dddd;color:#000");
				}
			})
		}
}

你可能感兴趣的:(WEB前端-layui)