layui + thinkphp table 表格显示多张图片及其点击放大浏览

效果图

核心代码

css table 图片高度自适应

<style type="text/css">
    .layui-table-cell {
        height: auto;
        line-height: 28px;
    }
</style>

js 核心代码

table 初始化

        var ins1 = table.render({
            elem: '#demo',
            url: "/goods_images/lists",
            defaultToolbar: true,
            cols: [[
                {type: "checkbox",},
                {field: 'id', width: 80, title: 'ID'},
                {field: 'name', width: 200, title: '产品名称',templet:function (e) {
                        try{
                            return e.goods.product_code
                        }catch (e) {
                            return '-'
                        }
                    }},
                {
                    field: 'images', width: 800, title: '缩略图',event: 'show_image', templet: function (e) {

                        var str = '<div id="layer-photos-demo" class="layer-photos-demo">';
                        try{

                            for (let i = 0; i < e.image_list.length; ++i) {
                                let image = e.image_list[i].src
                                str += '<img  layer-src='+image+' src="'+image+'"  width="32%" height="32%" style="margin-right: 10px">';
                            }
                        }catch (e) {
                        }
                        str += '</div>';
                        return str;
                    }
                },
                {field: 'update_time', width: 200, title: '最后修改时间'},
                {field: 'create_time', width: 200, title: '创建时间'},
                {field: 'admin_name', width: 200, title: '操作人',templet:function (e) {
                        try{
                            return e.goods.admin_name
                        }catch (e) {
                            return '-'
                        }
                    }},
                {title: '操作', width: 80, toolbar: '#currentTableBar', align: "center"},
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line',
        });

点击图片放大事件

  // 表格里面的事件
        table.on('tool(edm_table_index)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'edit':
                    edit(data.id)
                    break;
                case 'show_image':
                    layer.photos({
                        photos:{"data": data.image_list}
                        ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                    });

                    break;

            }

        });

图片的数据格式

后端核心代码

    /**
     * 信息列表
     */
    public function lists()
    {
        // 页数
        $params = $this->request->param();
        $likeWhere = $this->searchWhere($params);


        $lists = $this->model->with(['goods'=>function($query) use ($likeWhere){
            $query->where(['goods.is_del'=>0]);
            $query->where($likeWhere);
        }])->where("image != '' or images !='' " )
            ->paginate($this->limit);
//
        $base = 'http://xxxxxx.com';

        foreach ($lists as &$row){
            $item = [];
             if ($row['images'] !=''){
                 $item[] = ['src'=>$base.$row['image']];
             }
             if (is_array($row['images_json'])){
                 foreach ($row['images_json'] as $image){
                     $item[] = ['src'=>$base.$image['src']];
                 }
             }
            $row['image_list'] = $item;
        }

        _lists($lists);
    }
    
    /**
      搜索产品的条件
     * @return array
     */
    private function searchWhere($params = [])
    {
        $where = [];
        if (isset($params['searchParams'])){
            $search = json_decode($params['searchParams'],true);
            $field = $search['name'] ?? '';
            $field =trim($field);
            if ($field !=''){
                $where[] = ['product_code|product_name', 'like', "%{$search['name']}%"];
            }
        }

        return $where;
    }