layui数据表格中加入二维码

最近在做一个后端项目时，需要在表格中展示二维码，但是在layui表格渲染时无法获取元素id，下面就将我出现的问题记录下，并提供解决方案供大家查看。

jq插件qrcode引入和下载 

qrcode其实是通过使用jQuery实现图形渲染，画图，支持canvas（HTML5）和table两种方式

下载地址：https://github.com/jeromeetienne/jquery-qrcode

引入：

<script type='text/javascript' src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>

qrcode参数说明 

$("#code").qrcode({
    text : "https://github.com/jeromeetienne/jquery-qrcode" //设置二维码内容
    render : "canvas",//设置渲染方式 （有两种方式 table和canvas，默认是canvas）
    width : 300, //设置宽度
    height : 300, //设置高度
    typeNumber : -1, //计算模式
    correctLevel : 0,//纠错等级
    background : "#ffffff",//背景颜色
    foreground : "#000000" //前景颜色
});

LAYUI表格中加载二维码

table.render({
    elem: '#currentTableId',
    url: '',//数据接口
    toolbar: '#toolbarDemo',
    defaultToolbar: false,
    cols: [[
        {field: 'id', width: 80, title: 'ID', sort: true,align: "center"},
        {field: 'title',  title: '签到名称',align: "center"},
        {field: 'limitation', title: '签到限制', align: "center"},
        {field: 'url',  title: '大屏地址',align: "center"},
        {title: '二维码', align: "center"},
        {field: 'create_time', title: '创建时间', sort: true,align: "center"},
        {title: '操作', minWidth: 200, toolbar: '#currentTableBar', align: "center"}
    ]],
    limits: [10, 15, 20, 25, 50, 100],
    limit: 15,
    page: true,
    skin: 'line',
    done: function (res, curr, count) {
        tableList = res.data;
        var that = this.elem.next()
        res.data.forEach(function (item, index) {
            var tr = that.find(".layui-table-box tbody tr[data-index=" + index + "]")
            var td = tr.find('.laytable-cell-1-0-4')//需要展示二维码的列，从0开始
            window.$(td).qrcode({
                render: "canvas",
                width: 30,
                height: 30,
                // foreground: "#000",
                // background: "#fff",
                text:  "www.xinuy.top?id="+item.id
            })
            //鼠标经过放大缩小
            $(td).mouseenter(function () {
                layer.tips('<div id="qrcode-show" style="width: 300px;"></div>', this, {tips: 2, time: 0, area: '330px', shade: 0});
                window.$("#qrcode-show").qrcode({
                    render: "canvas",
                    width: 300,
                    height: 300,
                    foreground: "#fff",
                    background: "#000",
                    text: "www.xinuy.top?id="+item.id
                })
            }).mouseleave(function (e) {
                layer.closeAll('tips');
            })
        })
    },
});

注意事项

1. 二维码展示列下标是从0开始，案例中二维码属于第5列，所以是“.laytable-cell-1-0-4”。
2. $(“#qrcode”).qrcode({})没有加入layui扩展，所以在layui.use(）中使用需要在前面加一个window.$(“#qrcode”).qrcode({}).

实现效果 

        鼠标经过二维码会显示二维码大图，移除则恢复原样。 

友情链接

layui数据表格中加入二维码https://xinuy.top/index/index/article.html?article=12