viewer.js使用实例

项目用的是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 + ' />';
        }