功能强大的jQuery图片查看器插件-白红宇

功能强大的 jQuery 图片查看器插件 : viewer
image.png
$(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 ``;                    }                }, {                    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);    }};