在引导表中添加链接

Posted 2023-05-08

【中文标题】在引导表中添加链接

【英文标题】：Adding a link in bootstrap-table

【发布时间】：2015-03-05 07:59:29

【问题描述】：

我想在bootstrap-table 中添加指向列的链接。如何做到这一点？

【问题讨论】：

这些可能也很有趣，因为它们既回答了这个问题，又显示了更广泛的用例，例如在单元格或行上单击：github.com/wenzhixin/bootstrap-table/issues/1380、github.com/wenzhixin/bootstrap-table/issues/877

【参考方案1】：

在您的 html 表格中：

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

在您的 javascript 中：

function LinkFormatter(value, row, index) 
  return "<a href='"+row.url+"'>"+value+"</a>";

【参考方案2】：

我找到了使用“格式化程序”对象的机制。下面是一个示例格式化程序。

function identifierFormatter(value, row, index) 
    return [
            '<a class="like" href="javascript:void(0)" title="Like">',
                value,
            '</a>'].join('');

基本上要使用它，它必须作为 HTML 数据属性添加到表头。

<th data-field="identifier" data-align="right" data-sortable="true"  data-formatter="identifierFormatter">Identifier</th>

【讨论】：

你能给我看一个你是怎么做到的例子吗，我需要同样的东西。您是如何将其合并到您的代码中的？

@CesarBielich 改进了答案

【参考方案3】：

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)
    ...