如何在 Bootstrap Table 中添加 Bootstrap 按钮
Posted
技术标签:
【中文标题】如何在 Bootstrap Table 中添加 Bootstrap 按钮【英文标题】：How do you add Bootstrap buttons in Bootstrap Table 【发布时间】：2017-02-09 00:50:05 【问题描述】：如何在Bootstrap Table中添加引导按钮
【问题讨论】：
【参考方案1】：我已经想出了解决办法。想和大家分享一下。
这是我的桌子：
<table
id="table"
data-toggle="table"
data-pagination="true"
data-url="data/RegisteredVisitors.json"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-search="true"
data-show-pagination-switch="true"
data-id-field="visitor_id"
data-page-list="[10, 25, 50, 100, ALL]"
data-show-footer="false">
<thead>
<tr>
<th data-field="visitor_id" data-checkbox="false" >#</th>
<th data-field="visitor_number" data-formatter="VisitorDetails">Visitor #</th>
<th data-field="visitor_names" data-formatter="VisitorDetails" data-sortable="true">Visitor Names</th>
<th data-field="phone_number" data-sortable="true">Phone Number</th>
<th data-field="matter_type" data-sortable="true">Matter Type</th>
<th data-field="office_name" data-sortable="true">Office Attending</th>
<th data-field="time_in" data-sortable="true">Time In</th>
<th data-field="time_out" data-sortable="true">Time Out</th>
<th data-field="last_visit" data-sortable="true">Last Visit</th>
<th data-formatter="TableActions">Action</th>
</tr>
</thead>
</table>
这是我的 jQuery 函数
function TableActions (value, row, index)
return [
'<a class="like" href="javascript:void(0)" title="Edit">',
'<i class="glyphicon glyphicon-pencil"></i>',
'</a> ',
'<a class="danger remove" href="javascript:void(0)" data-visitorserial="'+row.visitor_id+'" data-visitornames="'+row.visitor_names+'" data-visitorid="'+row.visitor_number+'" data-toggle="modal" data-target="#VisitorDelete" title="Remove">',
'<i class="glyphicon glyphicon-trash"></i>',
'</a>'
].join('');
终于跑起来了。
【讨论】：
【参考方案2】：<table class="table table-hover">
<thead>
<tr>
<th>Button</th>
</tr>
</thead>
<tbody>
<tr>
<td><button type="button" class="btn btn-primary">button</button></td>
</tr>
</tbody>
</table>【讨论】：
【参考方案3】：对我来说，我做到了。
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Operation</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>
<button type="button" class="btn btn-outline-primary" onclick="location.href='#'">Edit</button>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>
<button type="button" class="btn btn-outline-primary" onclick="location.href='#'">Edit</button>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>
<button type="button" class="btn btn-outline-primary" onclick="location.href='#'">Edit</button>
</td>
</tr>
</tbody>
</table>The outcome should look like something like this.
【讨论】：
【参考方案4】：@Joseph Daudi 的回答很好，我想补充一下。
创建自定义field例如tableAction ?参见一个可运行的示例并使用formatted设置值
formatter: (value, row, index, field) =>
curID = row[UNIQUE_ID]
return [
`<button type="button" class="btn btn-default btn-sm" onclick="deleteItem($curID)">`,
`<i class="far fa-trash-alt"></i>`,
`</button>`,
`<button type="button" class="btn btn-default btn-sm">`,
`<i class="far fa-thumbs-up"></i>`,
`</button>`
].join('')
一个可运行的例子
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- fontawesome 5 -->
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/js/all.min.js"></script>
<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<!-- bootstrap-table-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
</head>
<body>
<table id="bs-table" class="table table-striped table-blue"
data-show-columns="true">
</table>
</body>
<script>
const TABLE = document.querySelector("table")
const TABLE_ID = TABLE.getAttribute("id")
const table = $(`#$TABLE_ID`)
const UNIQUE_ID = 'id'
function createBSTable()
const columns = [
field: "id", title: "ID",
field: "title", title: "Title",
field: "tableAction", title: "Action",
formatter: (value, row, index, field) =>
curID = row[UNIQUE_ID]
return [
`<button type="button" class="btn btn-default btn-sm" onclick="deleteItem($curID)">`,
`<i class="far fa-trash-alt"></i>`,
`</button>`,
`<button type="button" class="btn btn-default btn-sm">`,
`<i class="far fa-thumbs-up"></i>`,
`</button>`
].join('')
]
table.bootstrapTable()
table.bootstrapTable('refreshOptions',
columns: columns,
url: "https://jsonplaceholder.typicode.com/photos",
// data: dataArray,
height: 768,
uniqueId: "id",
striped: true,
pagination: true,
sortable: true,
pageNumber: 1,
pageSize: 10,
pageList: [10, 25, 50, 100],
search: true,
showToggle: true,
searchHighlight: true,
)
table.bootstrapTable('refresh')
function deleteItem(curID)
if (!confirm('Are you sure you want to delete this item?'))
return
const ids = [curID]
table.bootstrapTable('remove',
field: UNIQUE_ID,
values: ids,
)
(
() =>
window.onload = () =>
createBSTable()
)()
</script>
</html>查找图标
font awesome bootstrap-Glyphs 我更喜欢使用 fontawesome。【讨论】：
【参考方案5】：如果您的目标是引导按钮，您也可以尝试以下方法
function TableActions(value, row, index)
return '<button class="btn btn-primary">Add</button>'
【讨论】：
以上是关于如何在 Bootstrap Table 中添加 Bootstrap 按钮的主要内容，如果未能解决你的问题，请参考以下文章
在 Bootstrap Vue <b-table> 中动态创建模板槽
如何使用JS在`bootstrap-table`生成的`lt;td>标签中添加`data`属性
python测试开发django-127.bootstrap-table 如何给单元格添加功能按钮(编辑/删除) 和事件（events）