layui表格中加入二维码怎么实现

image.png

cols:[

 {
                        field: 'img',
                        title: '二维码',
                        sort: false,
                        templet: function (d) {
                          
                                 $('').qrcode({
                                     render: "canvas", //也可以替换为table
                                     width: 100,
                                     height: 100,
                                     foreground: "#C00",
                                     background: "#FFF",
                                     text: d.img
                                 })
                        }

                    },

]

二维码必须要挂载一个元素上,此处tbody中的tr 获取不到,我该怎么解决,求大神赐教!

阅读 5.2k
1 个回答
 done: function (res, curr, count) {
                    console.log(res)
                    tableList = res.data;
                    //    $('th').css({'background-color': '#003eee','color':' #fff','font-weight':'bold'})
                    var that = this.elem.next()
                    res.data.forEach(function (item, index) {
                        console.log(item)
                        var tr = that.find(".layui-table-box tbody tr[data-index=" + index + "]")
                        if (index % 2 == 0) {
                            tr.css('background-color', '#fff')
                        } else {
                            tr.css('background-color', 'rgba(112,175,253,.1)')
                        }
                        var td = tr.find('.laytable-cell-1-0-6')
                        console.log(td)
                        $(td).qrcode({
                            render: "canvas",
                            width: 50,
                            height: 50,
                            foreground: "#000",
                            background: "#fff",
                            text: item.img
                        })
                        var flag = true
                        function draw(w,b){
                            $(td).empty()
                            $(td).qrcode({
                                render: "canvas",
                                width: w,
                                height: w,
                                foreground: "#000",
                                background: "#fff",
                                text: item.img
                            })
                            $(td).css({
                                'transform': 'translateX('+b+'px)',
                                'transition':' all 0.1s ease-in'
                            })
                        }
                        $(td).click(function () {
                            if (flag) {
                                draw(100,-20)
                            } else {
                                draw(50,0)
                            }
                            flag = !flag
                        })

                    })

                },

            }

        );

image.png

    • 需要在done中写入以上代码
    • 其中包含各行变色 各行变色需要table中设置table.render({ even: true,})
    • 二维码点击放大!
    撰写回答
    你尚未登录,登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进,让解决方法与时俱进
    推荐问题