layui实现隔行变色设置

                                                                  实现如图所示效果

                                                         方法的含义

                                                        代码显示

layui.use('table', function(){
  table = layui.table;
  table.render({
	  elem: '#tables',
	  height: 300,
	  cols: [[ //表头
		  {checkbox: true, fixed: true}
		  ,{type:'numbers', title: '序号', width: 180}
	      ,{field:'bussBusinessnoticeno', width:120, title: '业务通知单号'}
	      ,{field:'bussCustomcode', width:90, title: '客户编号'}
	      ,{field:'bussCustomname', width:87, title: '客户名称'}
	      ,{field:'bussLinkman',  width:90,title: '联系人', minWidth: 100}
	      ,{field:'bussTelphone', width:150, title: '电话'}
	      ,{field:'bussPickupaddress', width:220, title: '取件地址'}
	      ,{field:'quCity', width:90, title: '取件城市'}
	      ,{field:'bussArrivecity', width:90, title: '到达城市'}
	      ,{field:'bussProduct', width:60, title: '产品'}
	      ,{field:'bussReservationtime', width:150, title: '预约时间'}
	    ]],
	  url:'../../buss/queryPage',
	  method:'post',
	  limit:6,
	  page:true,
	  limits:[10,20,30,40,50,60,70,80,90],
	  done: function (res, curr, count) {// 表格渲染完成之后的回调
		  var that = this.elem.next();
          res.data.forEach(function (item, index) {
        	  //console.log(item.empName);item表示每列显示的数据
             if (index%2==0) {
                  var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", "#6666FF");
              } else{
                  var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", "#CCCCFF");
              } 
          });
      }
  });

希望这篇文章能帮到你们。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值