用于超链接格式化功能的引导表数据格式化程序不起作用答案

【问题标题】：Bootstrap table data-formatter for hyperlink formating functions not working用于超链接格式化功能的引导表数据格式化程序不起作用
【发布时间】：2020-08-07 10:56:53
【问题描述】：

我一直在尝试使用以下代码格式化 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"
    }
]

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

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

【问题讨论】：

标签： javascript html twitter-bootstrap bootstrap-table

【解决方案1】：

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

另外，如果你看下面的截图，你不需要访问e的url属性，因为e已经包含了url，而t是一个包含标题的对象。

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

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>

【讨论】：