给Layui表格添加好看的样式
function loaddata(datafield){
//alert(JSON.stringify(data));
elem:'#order_query_table'
,url:'../order/getAutomaticRequestRecordlist'
,where:datafield
,title:'⾃动请货记录表'
,cellMinWidth:80//全局定义常规单元格的最⼩宽度，layui2.2.1新增
,limits:[10,20,30,40,50,200,400,600]
,limit:10
,
page:true
,done:function(data){
console.log(data);
}
,cols:[[
{type:'checkbox',fixed:'left'},
{
field:'Operator',title:'操作⼈',style:"text-align:center",align:"center",
},
//{
//field:'StoreId',title:'门店id',style:"text-align:center",align:"center",
/
/},
{
field:'R_time',title:'请货⽇期',style:"text-align:center",align:"center",
},
{
field:'R_requestId',title:'请货号',style:"text-align:center",event:"getaddress",align:"center",
},
{
field:'R_type',title:'请货类型',style:"text-align:center",align:"center",
templet:function(mydata){
if(mydata.R_type==1){
return"⼿动";
}else{
return"⾃动";
}
}
},
{
field:'R_state',title:'请货状态',style:"text-align:center;color:red;",event:"getprodetail",align:"center",
templet:function(mydata){
if(mydata.R_state==1){
return"是";
}else{
return"否";
}
}
},
//{
//field:'GOODSID',title:'商品Id',style:"text-align:center",align:"center",
//},
//{
//field:'GOODSNAME',title:'商品名称',style:"text-align:center",align:"center",
//},
/
/{
//field:'GOODSTYPE',title:'规格',style:"text-align:center",align:"center",
//},
//},
//{
text align center
//field:'FACTORYNAME',title:'⼚商',style:"text-align:center",align:"center",
//},
//{
//field:'BARCODE',title:'UPC',style:"text-align:center",align:"center",
//},
//{
/
/field:'GOODSQTY',title:'库存',style:"text-align:center",align:"center",
//},
//{
//field:'R_Detail_time',title:'确定请货时间',style:"text-align:center",align:"center",
//},
{
fixed:'right',title:'操作',toolbar:'#barDemo'
}]],
toolbar:"#toolbarDemo",
done:function(res,curr,count){
$('th').css({'background-color':'#bdccea','color':'black','font-weight':'500'});
var that=();res.data.forEach(function(item,index){
//console.pName);item表⽰每列显⽰的数据
if(index%2==0){
var tr=that.find(".layui-table-box tbody tr[data-index='"+index+"']").css('background-color','#ecedff').addClass('addclass');
}else{
var tr=that.find(".layui-table-box tbody tr[data-index='"+index+"']").css('background-color','#E0EEF6').addClass('addclass');
}
})
},
text:{
none:'暂⽆相关数据'//默认：⽆数据。注：该属性为layui2.2.5开始新增
},
id:'order_list'
});
}
主要代码：
done: function (res, curr, count){
$('th').css({'background-color':'#bdccea','color':'black','font-weight':'500'});
$('th').css({'background-color':'#bdccea','color':'black','font-weight':'500'});
$('layui-table-total.layui-table tbody tr').css({'color':'red'});
$('.layui-table-total.layui-table tbody tr').css({'background-color':'#ffffb4'});
var that =(); res.data.forEach(function (item, index){
//console.pName);item表⽰每列显⽰的数据
if(index %2==0){
var tr = that.find(".layui-table-box tbody tr[data-index='"+ index +"']").css('background-color','#ecedff').addClass('addclass');
}else{
var tr = that.find(".layui-table-box tbody tr[data-index='"+ index +"']").css('background-color','#E0EEF6').addClass('addclass');
}
})
},
效果展⽰：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。