LeCMS
ClassCMS
Fastadmin
iCMS
PbootCMS
PHPCMS
易优CMS
YzmCMS
讯睿CMS
极致CMS
Wordpress
HkCMS
YznCMS
WellCMS
ThinkCMF
帝国CMS
SIYUCMS
先看效果
开始整活，先找个处理二维码的js类
https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html
嗯～ 不错正好适合我这种菜鸟
下载好的js提取出来到 public/assets/js
requireJS加载模块里声明一下 public/assets/js/require-backend.js
paths: { 'qrcode':'qrcode.min',到所属的表格js里添加上我们的QRcode
define([XXXXXX,'qrcode'], function (XXXXX, undefined) {在最后的一个api里添加一个渲染方法formatter里添加一个qrcode
api: { formatter: {//渲染的方法 qrcode: function (value, row, index) {现在我们找一个参数引用这个渲染方法
以下操作都在这个方法内操作
{field: 'uuid', title: __('二维码'), operate: false, formatter:Controller.api.formatter.qrcode}目标是一个按钮放上去就显示二维码 先整个按钮
return '<a class="label bg-green"> 显示二维码 </a>';
嗯~ 真好看 我真聪明
解析来我们让他有个浮窗
return '<a class="label bg-green" data-toggle="tooltip" data-original-title="<a>世界属于三体！</a>" data-html="true"> 显示二维码 </a>'; 
看起来还不错 那就这里面加入我们需要的二维码吧
看了一下文档 这个二维码需要一个对象。这样 我们先去 html的模版里给他加一个对象
<div id="QRcode"></div>我们回到js里 在前面加上初始化 默认太大了我们让二维码小一点
define([XXXXXX,'qrcode'], function (XXXXX, undefined) { var QR = new QRCode(document.getElementById("QRcode"),{ text: "https://mymoyi.cn", width: 128, height: 128 }); 现在我们回到formatter.qrcode里面
这里悬浮 tooltip 鼠标走开就没了 改用了弹窗 popover
// 设置URLlet url = location.origin + '/h5/#/?id=' + value;// 绘制QR.clear();QR.makeCode(url);// 获取图片let img = $("#QRcode").prop("outerHTML");// 拼接return '<a class="qrcode label bg-green" data-toggle="popover" data-title="请打开扫描二维码" data-html="true" data-content=''+img + ''> 显示二维码 </a>';
棒棒哒～ 有点小bug 第一次点击打开的时候位置不对 不过不影响使用
希望以上内容对你有所帮助！如果还有其他问题，请随时提问。 各类知识收集 拥有多年CMS企业建站经验，对 iCMS， Fastadmin， ClassCMS， LeCMS， PbootCMS， PHPCMS， 易优CMS， YzmCMS， 讯睿CMS， 极致CMS， Wordpress， HkCMS， YznCMS， WellCMS， ThinkCMF， 等各类cms的相互转化，程序开发，网站制作，bug修复，程序杀毒，插件定制都可以提供最佳解决方案。
未经允许不得转载：Str Tom工作室 » 让表格中显示二维码浮窗
