Layui实现列表展示图片及点击放大展示

Layui列表渲染代码

注:

  • 首先是返回了一个span标签包裹一个img标签
  • span标签里面的id值是根据当前数据的id值设定的,这样在点击图片的时候,才可以根据唯一id获取到图片
  • img标签设置了宽高,可以正好在列表中显示
  • img标签内定义了一个“showPic”事件,这样才可以下文js监听这个事件
{field: 'picUrl', title: '图片链接', align: "center",templet: function (d) {
	return "span>";
}},

js监听工具条

注:

  • 监听方式和监听列表中的toolbar中的删除编辑是一样的,链接:Layui官方说明

  • “showPic”是我们定义在img标签中的事件(lay-event)

  • layer.photos是Layui官方的展示图片的工具,链接:Layui官方说明

table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === "showPic") {
                layer.photos({
                    photos: '#pic_' + data.id,
                    //0-6的选择,指定弹出图片动画类型,默认随机
                    anim: 5
                });
            }
        });

测试效果

列表上的小图显示
Layui实现列表展示图片及点击放大展示_第1张图片
点击图片放大的效果

你可能感兴趣的:(Layui)