Fastadmin table 列表页图片预览处理

 

方法一 : 把下面的代码插入

// 为表格绑定事件
Table.api.bindevent(table);

的上面即可

table.on('post-body.bs.table', function (e, settings, json, xhr) {
            $(".btn-editone", this)
                .off("click")
                .removeClass("btn-editone")
                .addClass("btn-addtabs")
                .prop("title", __('Edit'));

            // 预览图弹出处理
            $('img').parent('a').attr('href','javascript:;');//去掉图片oss连接地址
            $('img').bind('click',function(){
                var imgs = $(this).parents('td').find('a img');
                var dataJson = [],item={};
                for (var i = 0; i < imgs.length; i++) {
                    item['alt'] = '';
                    item['pid'] = Math.random()*10;
                    item['src'] = item['thumb'] = $(imgs[i]).attr('src');
                    dataJson.push(item);
                    item = {}; // 重置
                }
                var json =  {
                  "title": "", //相册标题
                  "id": 123, //相册id
                  "start": 0, //初始显示的图片序号，默认0
                  "data": dataJson
                };
                Layer.photos({
                    photos: json,
                    anim: 0 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                }); 
            })
        });

 

方法二 : 把backend-init.js的代码替换成下面的代码

define(['backend', 'table'], function (Backend, Table) {

    /*! 注册 data-tips-image 事件行为 */
    $('body').on('click', '[data-tips-image]', function () {
        var img = new Image();
        var imgWidth = this.getAttribute('data-width') || '480px';
        img.onload = function () {
            var $content = $(img).appendTo('body').css({background: '#fff', width: imgWidth, height: 'auto'});
            Layer.open({
                type: 1, area: imgWidth, title: false, closeBtn: 1,
                skin: 'layui-layer-nobg', shadeClose: true, content: $content,
                end: function () {
                    $(img).remove();
                },
                success: function () {

                }
            });
        };
        img.onerror = function (e) {

        };
        img.src = this.getAttribute('data-tips-image') || this.src;
    });

    Table.api.formatter.image =  function(value){
        return "<a href='javascript:void(0)' data-tips-image='"+value+"'><img src='"+value+"' class='img-sm img-center' ></a>";
    };
});

 

这样直接在页面的img标签中添加 data-tips-image，点击时自动弹出图片预览

<img src="{$goods.image}" data-tips-image width="50" height="50" alt="">

改js中的table也是一样的，我们只需要更改formatter就可以了，示例如下：

formatter: Table.api.formatter.image

替换成：

formatter: function(value){
                 return "<a href='javascript:void(0)' data-tips-image='"+value+"'><img src='"+value+"' class='img-sm img-center' ></a>";
           }

图片组代码：

    Table.api.formatter.images =  function(value){
        var arr = value.split(',');
        var html = [];
        $.each(arr, function (i, value) {
            value = value ? value : '/assets/img/blank.gif';
            html.push('<a href="javascript:void(0)" data-tips-image="'+value+'"><img class="img-sm img-center" src="' + value + '" /></a>');
        });
        return html.join(' ');
    };