Layui表格如何实现点击图片预览图片功能

8天前   阅读:122   分类:前端    标签: Layui

在使用layui框架的时候,我们有时需要放大表格中的图片,可以使用下面的方法来实现。

表格部分代码

table.render({
    elem: '#currentTableId',
    url: '{:url("union.customer.getCustomer")}',
    toolbar: '#toolbarDemo',
    defaultToolbar: ['filter', 'exports', 'print', {
      title: '提示',
      layEvent: 'LAYTABLE_TIPS',
      icon: 'layui-icon-tips'
    }],
    cols: [[
      {type: "checkbox", width: 50},
      {field: 'id', width: 80, title: 'ID', sort: true},
      {field: 'cate', width: 100, title: '问卷类型'},
      {field: 'nick', minwidth: 80, title: '用户信息'},
      {field: 'content', minwidth: 80, title: '服务评价'},
      {field: 'other_proposal', minwidth: 80, title: '意见'},
      {
        title: '图片'
        ,align: "center"
        ,width:300
        ,templet: function (d) {
          return '<div >'+d.photo+'</div>';
        }
      }, 
      {field: 'created_at', title: '时间', width: 160, sort: true},
      {title: '操作', width: 130, toolbar: '#currentTableBar', align: "center"}
    ]],
    limits: [5, 15, 20, 25, 50, 100],
    limit: 5,
    page: true,
    unresize: false,
    // skin: 'line',
    response: {
    statusName: 'code' //规定数据状态的字段名称,默认:code
      ,statusCode: 200 //规定成功的状态码,默认:0
      ,msgName: 'msg' //规定状态信息的字段名称,默认:msg
      ,countName: 'count' //规定数据总数的字段名称,默认:count
      ,dataName: 'data' //规定数据列表的字段名称,默认:data
    }
}); 

点击图片预览放大图片

//元素加载完成之后点击事件
$(document).on("click", ".layui-form img[name = 'coverUrl']", function (e) {
  console.log(e)
  layer.open({
    type: 1,
    title: false,
    closeBtn: 0,
    shadeClose: true, //点击阴影关闭
    area: ['50%', '50%'],
    content: "<img width='100%' height='auto' src=" + $(this).context.currentSrc + " />",
  });
}) 

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/821.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
勤于学习,乐于分享。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×