zoukankan      html  css  js  c++  java
  • layui 表格点击图片放大

    表格

    ,cols: [[ //表头
        {checkbox: true,fixed: true}
        ,{type: 'numbers', title: 'ID', sort: true,80}
        ,{field: 'product_name', title: '名称'}
        ,{field: 'product_description', title: '描述'}
        ,{
            title: '图片'
            ,align: "center"
            ,100
            ,templet: function (d) {
                return '<div ><img src="'+d.path+'" alt="" width="50px" height="50px" onclick="showBigImage(this)"></a></div>';
            }
        }
        ,{field: 'product_url', title: '链接'}
        ,{field: 'remark', title: '备注'}
        ,{field: 'created_at', title: '添加时间'}
        ,{fixed: 'right',  220, align:'center', toolbar: '#options'}
    ]]

    JS

    /**
     * @param e 图片对象
     */
    function showBigImage(e) {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            shadeClose: true, //点击阴影关闭
            area: [$(e).width + 'px', $(e).height + 'px'], //宽高
            content: "<img src=" + $(e).attr('src') + " />"
        });
    }
  • 相关阅读:
    java上传文件依赖的jar
    maven创建web项目很慢
    人才的成长与工作环境
    msdtc
    阿里巴巴的ChaosBlade
    集成电路
    晶体管
    PHPStorm如何快捷提交代码到服务器
    PHP 7新特性
    题(3)
  • 原文地址:https://www.cnblogs.com/Skrillex/p/11411339.html
Copyright © 2011-2022 走看看