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
                });
            }
        });

测试效果

列表上的小图显示

点击图片放大的效果