功能强大的 jQuery 图片查看器插件 : viewer

$(function () {
    TaskReport.renderReportTable();
    $('.sidebar-toggle').click();
});

let TaskReport = {
    renderReportTable: () => {
        $('#task-report-table').bootstrapTable({
            detailView: false,//父子表
            //分页方式：client 客户端分页，server服务端分页（*）
            sidePagination: "client",
            pageNumber: 1,
            pageSize: 10,
            pageList: [10, 20, 50, 100, 200, 300],
            paginationHAlign: 'right', //right, left
            paginationVAlign: 'bottom', //bottom, top, both
            paginationDetailHAlign: 'left', //right, left
            paginationPreText: '‹',
            paginationNextText: '›',
            searchOnEnterKey: false,
            strictSearch: false,
            searchAlign: 'right',
            selectItemName: 'btSelectItem',
            //是否显示搜索
            search: true,
            url: '/api/task/findTask.json',
            method: 'GET',
            striped: true,      //是否显示行间隔色
            cache: false,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,     //是否显示分页（*）
            paginationLoop: false,
            silent: true,
            //是否启用排序

            //排序方式
            sortOrder: "asc",
            contentType: 'application/json',
            dataType: 'json',
            // dataField: 'departmentIssueQualityDataList', //server 后端 : json 对应的表格数据 key
            responseHandler: function (res) {
                console.log(res);
                $('#task-report-table').bootstrapTable('getOptions').data = res.data;
                let scenarioName = res.data[0] ? "" : res.data[0].scenario.name;
                TaskReport.renderScenarioInfo(scenarioName);

                return res;
            },
            queryParams: function (params) {
                params.tid = $('#tid').val();
                return params
            },
            // 当表格加载完毕才可以绑定的事件
            onPostBody: (rows) => {
                TaskReport.viewImages();
            },
            columns: [
                {
                    title: 'No.',
                    align: 'left',
                    valign: 'middle',

                    formatter: (value, row, index) => {
                        return `${index + 1}`;
                    }
                }, {
                    title: '节点名称',
                    align: 'left',
                    valign: 'middle',
                    cellStyle: function (value, row, index) {
                        return {
                            css: {
                                "min-width": "200px",
                                "word-wrap": "break-word",
                                "word-break": "normal"
                            }
                        };
                    },

                    formatter: (value, row, index) => {
                        return row.node.name;
                    }
                }, {
                    title: '截图',
                    align: 'center',
                    valign: 'middle',

                    formatter: (value, row, index) => {
                        let imageUrl = row.imageUrl;

                        return `<img data-original="${imageUrl}" src="${imageUrl}" width="200px" class="node-img" alt="">`;
                    }
                }, {
                    title: '输入脚本',
                    align: 'center',
                    valign: 'middle',

                    formatter: (value, row, index) => {
                        return row.node.input;
                    }
                }, {
                    title: '输出脚本',
                    align: 'left',
                    valign: 'middle',

                    formatter: (value, row, index) => {
                        return row.node.output;
                    }
                }, {
                    title: '期望输出',
                    align: 'left',
                    valign: 'middle',

                    formatter: (value, row, index) => {
                        return row.node.expectOutput;
                    }
                }, {
                    title: '实际输出',
                    align: 'left',
                    valign: 'middle',

                    formatter: (value, row, index) => {
                        return row.actualOutput;
                    }
                }, {
                    title: '断言算子',
                    align: 'left',
                    valign: 'middle',

                    formatter: (value, row, index) => {
                        return row.node.operator;
                    }
                }, {
                    title: '结果',
                    align: 'left',
                    valign: 'middle',

                    formatter: (value, row, index) => {
                        return row.result;
                    }
                }, {
                    title: '运行时间',
                    align: 'left',
                    valign: 'middle',

                    formatter: (value, row, index) => {
                        return `${row.startTime}~${row.endTime}`;
                    }
                }, {
                    title: '创建时间',
                    align: 'left',
                    valign: 'middle',

                    formatter: (value, row, index) => {
                        return row.gmtCreate;
                    }
                }
            ]
        });
    },

    renderScenarioInfo: (name) => {
        $('#scenario-name').html(name);
    },

    viewImages: () => {
        let images = $('.node-img');
        let handler = function (e) {
            console.log(e.type);
        };
        let options = {
            // inline: true,
            url: 'data-original',
            build: handler,
            built: handler,
            show: handler,
            shown: handler,
            hide: handler,
            hidden: handler
        };

        images.on({
            'build.viewer': handler,
            'built.viewer': handler,
            'show.viewer': handler,
            'shown.viewer': handler,
            'hide.viewer': handler,
            'hidden.viewer': handler
        }).viewer(options);

    }
};

https://github.com/fengyuanchen/viewer