使用bootstrap-table 和jqueryqrcodejs 生成一个二维码表格 数据格式为idnameqrcode以id号生成二维码
首先,需要引入bootstrap-table和jquery.qrcode.js的相关文件:
<!-- 引入bootstrap-table文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
<script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- 引入jquery.qrcode.js文件 -->
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
然后,可以通过以下代码生成二维码表格:
<table id="qrcode-table" data-toggle="table"
data-pagination="true"
data-page-size="10"
data-page-list="[10, 25, 50, 100]"
data-url="data.json">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">名称</th>
<th data-field="qrcode" data-formatter="qrcodeFormatter">二维码</th>
</tr>
</thead>
</table>
<script>
$(function() {
// 生成二维码
function qrcodeFormatter(value, row, index) {
var qrcodeId = 'qrcode-' + row.id;
var qrcodeUrl = 'http://example.com?id=' + row.id;
return '<div id="' + qrcodeId + '"></div>' +
'<script>$("#' + qrcodeId + '").qrcode({text: "' + qrcodeUrl + '"});</script>';
}
// 初始化表格
$('#qrcode-table').bootstrapTable({
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '名称'
}, {
field: 'qrcode',
title: '二维码',
formatter: qrcodeFormatter
}]
});
});
</script>
其中,qrcodeFormatter函数用于生成二维码,返回值为包含二维码的div和生成二维码的script标签的字符串。在script标签中,使用jquery.qrcode.js生成二维码,其中text参数为二维码所代表的链接地址。最后,在表格初始化时,将qrcodeFormatter函数指定为“二维码”列的formatter,即可在表格中显示二维码
原文地址: https://www.cveoy.top/t/topic/fkeU 著作权归作者所有。请勿转载和采集!