【发布时间】：2017-02-09 00:50:05
【问题描述】：
如何在Bootstrap Table中添加引导按钮
【问题讨论】：
标签： twitter-bootstrap bootstrap-table
【发布时间】：2017-02-09 00:50:05
【问题描述】：
我已经想出了解决办法。想和大家分享一下。
这是我的桌子：
<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('');
}
终于跑起来了。
【讨论】：
<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>【讨论】：
对我来说，我做到了。
<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>【讨论】：
@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。
【讨论】：
如果您的目标是引导按钮，您也可以尝试以下方法
function TableActions(value, row, index) {
return '<button class="btn btn-primary">Add</button>'
}
【讨论】：