viewer.js使用实例

深碍√TFBOYSˉ_ 2022-05-10 09:36 170阅读 0赞

项目用的是easyui:

在图片列格式化

\{field: 'onDutyPhoto', title: '上班照片', width: 80, align: 'center', formatter: function(val, row)\{  
                        return formatPhotoPath(val, row, 'Y', 'onDutyTime');  
                    \}\}

在datagrid加载完成之后初始化viewer查看图片方法

\------------------------------------------------开始----------------------------------------------------

onLoadSuccess: function () \{

// 图片携带的时间戳  
                    ts = new Date().getTime();

// 单行灯箱查看  
                    $("table.datagrid-btable tbody tr").each(function()\{

$(this).viewer('destroy').viewer(\{  
                            url: function(image) \{  
                                var $e = $(image);  
                                return getPhotoUrl(image.src, $e.attr("data-duty-time"), $e.attr("data-shop-name"), $e.attr("data-show-water"));  
                            \},  
                            filter: function (e) \{  
                                return $(e).is(":not(\[noview\])");  
                            \}  
                        \});

\});

这个初始化的目的是为了让一行显示当前行的图片，如果显示所有图片；则将

$(this).viewer('destroy').viewer(\{\})中的$(this)换为图片所在的根标签即可；例如

$(".datagrid-view").viewer('destroy').viewer(\{\});即可查看全部图片

\------------------------------------------------结束----------------------------------------------------

格式化代码：

// 图片列路径格式化  
        function formatPhotoPath(val, row, showWater, dutyTimeField) \{  
            if (!val) \{  
                return "<div style='height:30px;'></div>";  
            \}  
            var smallPhotoUrl = getSmallPhotoUrl(val);

var dutyTime = dutyTimeField && row\[dutyTimeField\] || '';  
                return '<img alt="' + title + '" src="' + smallPhotoUrl + '" data-duty-time="' + dutyTime + '" data-shop-name="' + row.shopName + '" data-show-water=' + showWater + ' />';  
        \}