将超链接添加到 bootstrap-table 生成的列中的文本答案

【问题标题】：Add hyperlink to text in a column generated by bootstrap-table将超链接添加到 bootstrap-table 生成的列中的文本
【发布时间】：2015-08-09 07:13:00
【问题描述】：

使用 Node + Jade 正在创建一个可以显示大量用户列表的表，因此我决定使用 bootstrap-table，并且我发现了一个很棒的库，有很多可能性。

我目前正在使用分页在表格中不显示太多信息，该表格目前只有两列，第一列是选择多个用户的复选框，第二列只是用户名用户。该表看起来不错，但我会添加一个链接来详细介绍用户（例如：/user/:id），然后我将此链接添加到我的第二列。

目前我的代码如下所示：

table(data-toggle='table', data-url='users.json', data-pagination='true', data-search='true', data-striped='true')
  thead
    tr
      th(data-checkbox='true')
      th(data-field='username') Username

我只想在包含用户名的文本中添加一个超链接

【问题讨论】：

标签： pug bootstrap-table

【解决方案1】：

在您的 HTML 表格中：

<th data-field="user_name" data-formatter="LinkFormatter">Computer</th>

在你的 javascript 中：

function LinkFormatter(value, row, index) {
  return "<a href='/userid/id:"+row.id+"'>"+value+"</a>";
}

【讨论】：

【解决方案2】：

HTML

<table id="table_exemple" data-toggle="table" data-pagination="true" >
    <thead>
        <tr>
            <th data-field="id">Id</th>
            <th data-field="name">Nome</th>
            <th data-field="action" data-formatter="ActionFormatter">Details</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

JAVASCRIPT

var bootstrap_table = $('#table_exemple');

function AddRow(obj){
    bootstrap_table.bootstrapTable('insertRow', {
        index: 0,
        row: {
           id: obj.id,
           name: obj.name,
           action: obj.id
        }
    });
}

function ActionFormatter(value) {
    return '<a href="javascript:void(0)" onclick="Details('+ value +')">Details</a>';
}

function Details(id){
    ...
}

【讨论】：