Bootstrap-Table：使用 Ajax 调用并将链接添加到输出表

Question

我正在使用引导表通过 ajax 调用插入数据。但是，我无法在表格中格式化这些数据。

在下面找到我的最小可行示例：

// your custom ajax request here
function ajaxRequest(params) {
  var url = 'https://jsonplaceholder.typicode.com/albums/1/photos'
  $.get(url + '?' + $.param(params.data)).then(function(res) {
    params.success(res)
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet">

<link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>

<table id="table_2" data-toggle="table" data-height="1200" data-page-size="50" data-ajax="ajaxRequest" data-pagination="true" class="table table-striped table-hover">
  <thead>
    <tr>
      <th data-field="title" scope="col">Title</th>
      <th data-field="url" scope="col">URL</th>
      <th data-field="thumbnailUrl" scope="col">ThumbnailUrl</th>
    </tr>
  </thead>

</table>

我想要如下表：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet">

<link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>

<table id="table_2" data-toggle="table" data-height="1200" data-page-size="50" data-pagination="true" class="table table-striped table-hover">
  <thead>
    <tr>
      <th data-field="title" scope="col">Title</th>
      <th data-field="url" scope="col">URL</th>
      <th data-field="thumbnailUrl" scope="col">ThumbnailUrl</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="https://via.placeholder.com/150/92c952" target="_blank">accusamus beatae ad facilis cum similique qui sunt</a>
      </td>
      <td>https://via.placeholder.com/600/92c952</td>
      <td>https://via.placeholder.com/150/92c952</td>
    </tr>
    <tr>
      <td>
        <a href="https://via.placeholder.com/150/92c952" target="_blank">accusamus beatae ad facilis cum similique qui sunt</a>
      </td>
      <td>https://via.placeholder.com/600/92c952</td>
      <td>https://via.placeholder.com/150/92c952</td>
    </tr>
    <tr>
      <td>
        <a href="https://via.placeholder.com/150/92c952" target="_blank">accusamus beatae ad facilis cum similique qui sunt</a>
      </td>
      <td>https://via.placeholder.com/600/92c952</td>
      <td>https://via.placeholder.com/150/92c952</td>
    </tr>
</table>

我想在第一列插入一个链接。

有什么建议可以在bootstrap-table 中实现吗？

感谢您的回复！

Answer 1

首先格式化ajaxRequest函数中的响应数据，使title字段同时包含标题（displaText）和url（链接）。然后使用一个函数来格式化数据并为a标签生成html。使用 bootstrap data-formatter 将此格式化程序函数与 html 连接。

这是工作示例。

// your custom ajax request here
function ajaxRequest(params) {
  var url = 'https://jsonplaceholder.typicode.com/albums/1/photos'
  $.get(url + '?' + $.param(params.data)).then(function(res) {
    
    // format the response here
    const formattedRes = res.map(o => {
      return {
        ...o,
        title: {
          displayText: o.title,
          link: o.url
        }
      }
    });

    params.success(formattedRes);
  })
}

// custom function for formatting link
function linkFormatter(value, row, index) {
  return `<a href="${value.link}" target="_blank">${value.displayText}</a>`;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet">

<link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>

<table id="table_2" data-toggle="table" data-height="1200" data-page-size="50" data-ajax="ajaxRequest" data-pagination="true" class="table table-striped table-hover">
  <thead>
    <tr>
      <th data-field="title" data-formatter="linkFormatter" scope="col">Title</th>
      <th data-field="url" scope="col">URL</th>
      <th data-field="thumbnailUrl" scope="col">ThumbnailUrl</th>
    </tr>
  </thead>

</table>