Bootstrap table data-formatter 超链接格式化功能不起作用

Question

我一直在尝试使用以下代码格式化 BoostrapTable 中列的值：

HTML:

<table data-toggle="#table" id="articles-table">
    <thead class="thead-light">
        <tr>
            <th data-field="url" data-formatter="LinkFormatter" data-sortable="true">
                Title
            </th>
            <th data-field="date" data-sortable="true">
                Date
            </th>
        </tr>
    </thead>
</table>

JS:

const LinkFormatter = (e, t) => '<a href="'+e.url+'" target="_blank">' + e.title + "</a>";
$(function() {
    $('#articles-table').bootstrapTable({
        data: mydata
    })
})

我的数据：

mydata = [
    {
        date: "2020-08-04",
        title: "Title one",
        url: "https://www.site1.org"
    }, {
        date: "2020-08-05",
        title: "Title two",
        url: "https://www.site2.org"

    }, {
        date: "2020-08-06",
        title: "Title three",
        url: "https://www.site3.org"
    }
]

我想要的是每个标题行都有一个超链接。我所拥有的是：

有人能告诉我我做错了什么吗？谢谢！

Answer 1

看起来 bootstrap-table 脚本没有获取声明为常量 const LinkFormatter 的函数。所以我所做的就是将它转换为一个函数声明，就像他们在 docs.

中所做的那样

此外，如果您查看下面的屏幕截图，您不需要访问 e 的 url 属性，因为 e 已经包含 url 和 t 是包含标题的 object。

简而言之，您只需要熟悉调试即可。为此，我建议只需在控制台中记录您的 objects 以查看它们在特定场景中的价值。

function LinkFormatter(e, t) {
  return '<a href="' + e + '" target="_blank">' + t.title + "</a>"
};

let mydata = [{
  date: "2020-08-04",
  title: "Title one",
  url: "https://www.site1.org"
}, {
  date: "2020-08-05",
  title: "Title two",
  url: "https://www.site2.org"

}, {
  date: "2020-08-06",
  title: "Title three",
  url: "https://www.site3.org"

}]

$(function() {
  $('#articles-table').bootstrapTable({
    data: mydata
  })
})

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

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

<table data-toggle="#table" id="articles-table">
  <thead class="thead-light">
    <tr>
      <th data-field="url" data-formatter="LinkFormatter" data-sortable="true">
        Title
      </th>
      <th data-field="date" data-sortable="true">
        Date
      </th>
    </tr>
  </thead>
</table>

Bootstrap table data-formatter 超链接格式化功能不起作用

Bootstrap table data-formatter for hyperlink formating functions not working

javascript

html

twitter-bootstrap

bootstrap-table