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

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

image.png

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 `<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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java技术分享

基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增、编辑...

30450
来自专栏跟着阿笨一起玩NET

几款代码混淆器(DotFuscator, .NET Reactor, xenocode)(转)

55510
来自专栏电光石火

美化ThinkPHP

首先我们来看看Thinkphp的模板, 成功界面: ? 错误页面 ? 说到美化的话,我们需要先找到这个模板在那里 ThinkPHP/Tp...

22970
来自专栏GuZhenYin

C#使用Xamarin开发可移植移动应用(5.进阶篇显示弹出窗口与通讯中心)附源码

前言 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 没啥好说的.开干吧. 今天...

22650
来自专栏雪胖纸的玩蛇日常

Vue+koa2开发一款全栈小程序(6.个人中心)

如果报错(往往因为mysql的版本8.0什么的,加密方式导致初始化脚本报错),解决办法

25920
来自专栏landv

C#_FindWindow

23240
来自专栏mantou大数据

MacOS下SVN迁移Git踩坑记

1. First Blood 之前在Windows环境下进行svn到git的迁移是很简单的,参考官方文档。 可是在macOS环境下(macOS High Si...

57850
来自专栏web开发

Vue项目图片剪切上传——vue-cropper的使用

最近自己在研究vue,然后做了一个小型的后台管理系统用来练手,开发过程中,想到了剪切图片上传用户头像的需求。上网百度了一番,发现好多用的都是vue-croppe...

54930
来自专栏Youngxj

[源码分享]Emlog博客后台自适应主题 N+

90840
来自专栏前端儿

电脑使用--快捷键等

         ps:  windows 键就是 键盘上那个 微软图标画圈的 .. 

13720

扫码关注云+社区

领取腾讯云代金券