layui表格图片点击放大功能

这里要加个图片样式，确保图片在表格中显示适合大小

<style type="text/css">
    .layui-table-cell{
      text-align:center;
      height: auto;
      white-space: normal;
    }
    .layui-table img{
      max-width:100px
    }
  </style>

放大效果

代码

表格显示图片并且添加点击事件

 cols: [[
        {title: '序号', field: 'index', align: 'center', type: 'numbers', width: 60},
        {title: '操作', field: 'right', align: 'center', toolbar: '#toolbar', width: 200},
        {title: '样品二维码', field: 'qr_filename', align: 'center', width: 130,
        templet: function dataUrl(d) {
           var img = "<img src=http://192.168.62.209:85/upload/image-qr/"+d.qr_filename+" οnclick=\"imgcli(this)\" >"; return img;
        }
        },
        {title: '样品编号', field: 'sampCode', align: 'center', width: 140},
        {title: '委托编号', field: 'oaId', align: 'center', width: 160},
        {title: '测试项目', field: 'taskName', align: 'center',width: 250},
        {title: '样品名称', field: 'sampName', align: 'center', width: 100},
        {title: '规格型号', field: 'sampType', align: 'center', width: 100},
        {title: '序列号', field: 'sampSn', align: 'center', width: 100},
        {title: '来样单位', field: 'prolineName', align: 'center', width: 200},
        {title: '来样日期 ', field: 'sampDate', align: 'center', width: 180},
      ]]

点击事件

<script>
  $('#divimg').click(function(){$(this).fadeOut(200)})
  function imgcli(obj){
    $('#divimg').fadeIn(200);
    $('#divimg img').attr('src',$(obj).attr("src"));
    $('#divimg img').css("margin-top","-"+$('#divimg img').height()/2+"px")
  }
</script>

点击放大图片后的位置大小

 <div  id="divimg" style="cursor:zoom-out;background: rgba(0,0,0,.6);width:100%;height:100%;position: absolute;z-index: 9999;left: 0;top: 0;display: none">
    <img style="width: 400px;left: 50%;top:50%;margin-left: -200px;position: absolute;">
  </div>