前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >layui怎么表格中显示图片&&layui为字段设置默认排序

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

作者头像
超级小可爱
发布2023-02-20 16:02:56
1.4K0
发布2023-02-20 16:02:56
举报
文章被收录于专栏:小孟开发笔记

js里面代码示例:

代码语言:javascript
复制
//方法级渲染
       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',
           }
       });

设置图片的是这行代码

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

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

代码语言:javascript
复制
initSort:{ field:'sort', type:'desc', }

未经允许不得转载:肥猫博客 » layui怎么表格中显示图片&&layui为字段设置默认排序

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档