首先,需要引入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,即可在表格中显示二维码

使用bootstrap-table 和jqueryqrcodejs 生成一个二维码表格 数据格式为idnameqrcode以id号生成二维码

原文地址: https://www.cveoy.top/t/topic/fkeU 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录