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

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

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

$(function () {derReportTable();$('.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, leftpaginationVAlign: 'bottom', //bottom, top, bothpaginationDetailHAlign: 'left', //right, leftpaginationPreText: '&lsaquo;',paginationNextText: '&rsaquo;',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 对应的表格数据 keyresponseHandler: function (res) {console.log(res);$('#task-report-table').bootstrapTable('getOptions').data = res.data;let scenarioName = res.data[0] ? "" : res.data[0].scenario.derScenarioInfo(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) => {de.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) => {de.input;}}, {title: '输出脚本',align: 'left',valign: 'middle',formatter: (value, row, index) => {de.output;}}, {title: '期望输出',align: 'left',valign: 'middle',formatter: (value, row, index) => {de.expectOutput;}}, {title: '实际输出',align: 'left',valign: 'middle',formatter: (value, row, index) => {return row.actualOutput;}}, {title: '断言算子',align: 'left',valign: 'middle',formatter: (value, row, index) => {de.operator;}}, {title: '结果',align: 'left',valign: 'middle',formatter: (value, row, index) => {sult;}}, {title: '运行时间',align: 'left',valign: 'middle',formatter: (value, row, index) => {return `${row.startTime}~${dTime}`;}}, {title: '创建时间',align: 'left',valign: 'middle',formatter: (value, row, index) => {Create;}}]});},renderScenarioInfo: (name) => {$('#scenario-name').html(name);},viewImages: () => {let images = $('.node-img');let handler = function (e) {console.pe);};let options = {// inline: true,url: 'data-original',build: handler,built: handler,show: handler,shown: handler,hide: handler,hidden: handler};({'build.viewer': handler,'built.viewer': handler,'show.viewer': handler,'shown.viewer': handler,'hide.viewer': handler,'hidden.viewer': handler}).viewer(options);}
};