top

layui怎么表格中显示图片&&layui为字段设置默认排序

js里面代码示例:

//方法级渲染
table.render({
elem: '#test-table-reload'
,url: '/admin/Yzq/list'
,cols: [[
{field:'id', title: 'id', sort: true}
,{field:'type', title: '1文章2视频', sort: true,width:118}
,{field:'title', title: '标题', sort: true,width:218}
,{field:'image', title: '封面图片',templet:function(d){
return "<img style='max-width:85px;' src='"+d.image+"'></img>";
},sort: true,width:218}
,{field:'memo', title: '描述', sort: true,width:218}
,{field:'status', title: '状态', sort: true,width:218}
,{field:'uid', title: '发布人用户id', sort: true,width:218}
,{field:'sort', title: '排序', sort: true,width:218}
,{field:'look_num', title: '浏览次数', sort: true,width:218}
,{field:'tqz_num', title: '花费的碳权证总数', sort: true,width:218}
,{field:'ky_tqz_num', title: '剩余可发放的碳权证总数', sort: true,width:218}
,{field:'pt_kc', title: '平台扣除部分', sort: true,width:218}
,{field:'createtime',width:118,title: '添加时间', sort: true ,templet:function(d){
return layui.util.toDateString(d.createtime*1000, "yyyy-MM-dd HH:mm");
}}
,{width:218, align:'center', toolbar: '#test-table-operate-barDemo'}
]]
,page: true,
initSort:{
field:'sort',
type:'desc',
}
});
//方法级渲染 table.render({ elem: '#test-table-reload' ,url: '/admin/Yzq/list' ,cols: [[ {field:'id', title: 'id', sort: true} ,{field:'type', title: '1文章2视频', sort: true,width:118} ,{field:'title', title: '标题', sort: true,width:218} ,{field:'image', title: '封面图片',templet:function(d){ return "<img style='max-width:85px;' src='"+d.image+"'></img>"; },sort: true,width:218} ,{field:'memo', title: '描述', sort: true,width:218} ,{field:'status', title: '状态', sort: true,width:218} ,{field:'uid', title: '发布人用户id', sort: true,width:218} ,{field:'sort', title: '排序', sort: true,width:218} ,{field:'look_num', title: '浏览次数', sort: true,width:218} ,{field:'tqz_num', title: '花费的碳权证总数', sort: true,width:218} ,{field:'ky_tqz_num', title: '剩余可发放的碳权证总数', sort: true,width:218} ,{field:'pt_kc', title: '平台扣除部分', sort: true,width:218} ,{field:'createtime',width:118,title: '添加时间', sort: true ,templet:function(d){ return layui.util.toDateString(d.createtime*1000, "yyyy-MM-dd HH:mm"); }} ,{width:218, align:'center', toolbar: '#test-table-operate-barDemo'} ]] ,page: true, initSort:{ field:'sort', type:'desc', } });
//方法级渲染
       table.render({
           elem: '#test-table-reload'
           ,url: '/admin/Yzq/list'
  			,cols: [[
                {field:'id', title: 'id', sort: true}
               ,{field:'type', title: '1文章2视频', sort: true,width:118}
               ,{field:'title', title: '标题', sort: true,width:218}
               ,{field:'image', title: '封面图片',templet:function(d){
                   return "<img style='max-width:85px;' src='"+d.image+"'></img>";
               },sort: true,width:218}
               ,{field:'memo', title: '描述', sort: true,width:218}
               ,{field:'status', title: '状态', sort: true,width:218}
               ,{field:'uid', title: '发布人用户id', sort: true,width:218}
               ,{field:'sort', title: '排序', sort: true,width:218}
               ,{field:'look_num', title: '浏览次数', sort: true,width:218}
               ,{field:'tqz_num', title: '花费的碳权证总数', sort: true,width:218}
               ,{field:'ky_tqz_num', title: '剩余可发放的碳权证总数', sort: true,width:218}
               ,{field:'pt_kc', title: '平台扣除部分', sort: true,width:218}
               ,{field:'createtime',width:118,title: '添加时间', sort: true ,templet:function(d){
               	return layui.util.toDateString(d.createtime*1000, "yyyy-MM-dd HH:mm");
               }}
               ,{width:218, align:'center', toolbar: '#test-table-operate-barDemo'}
           ]]
           ,page: true,
           initSort:{
               field:'sort',
               type:'desc',
           }
       });

设置图片的是这行代码

{field:'image', title: '封面图片',templet:function(d){
return "<img style='max-width:85px;' src='"+d.image+"'></img>";
},sort: true,width:218}
{field:'image', title: '封面图片',templet:function(d){ return "<img style='max-width:85px;' src='"+d.image+"'></img>"; },sort: true,width:218}
{field:'image', title: '封面图片',templet:function(d){
   return "<img style='max-width:85px;' src='"+d.image+"'></img>";
},sort: true,width:218}

如何设置字段默认排和设置排序按钮

initSort:{ field:'sort', type:'desc', }
initSort:{ field:'sort', type:'desc', }
initSort:{ field:'sort', type:'desc', }

 

 

THE END
icon
0
icon
打赏
icon
分享
icon
二维码
icon
海报