将超链接添加到由 bootstrap-table 生成的列中的文本
Add hyperlink to text in a column generated by bootstrap-table
我正在使用 Node + Jade 创建一个 table 来显示大量用户,所以我决定使用 bootstrap-table,我发现了一个很棒的库,里面有很多可能性。
我目前正在使用分页来不显示 table 中的那么多信息,目前 table 只有两列,第一列是 [=24] 的复选框=] 多个用户,第二列只是用户的用户名。 table 看起来很棒,但我会添加一个 link 来详细说明用户(例如:/user/:id),然后我将此 link 添加到我的第二列。
目前我的代码如下所示:
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
我只想在包含用户名
的文本中添加一个超级link
在你的 HTML table:
<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>";
}
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){
...
}
我正在使用 Node + Jade 创建一个 table 来显示大量用户,所以我决定使用 bootstrap-table,我发现了一个很棒的库,里面有很多可能性。
我目前正在使用分页来不显示 table 中的那么多信息,目前 table 只有两列,第一列是 [=24] 的复选框=] 多个用户,第二列只是用户的用户名。 table 看起来很棒,但我会添加一个 link 来详细说明用户(例如:/user/:id),然后我将此 link 添加到我的第二列。
目前我的代码如下所示:
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
我只想在包含用户名
的文本中添加一个超级link在你的 HTML table:
<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>";
}
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){
...
}