在线链接
1
2
3
4
5
6
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.20.0/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.20.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.20.0/dist/locale/bootstrap-table-zh-CN.min.js"></script>
|
同时，还需要用户bootstrap的css和js文件，否则 bootstrap-table的按钮显示不全（bootstrap4版本不兼容）
1
2
3
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
|
点击列名获取一整行的数据
换句话说就是根据唯一的id或者其他属性，获取该行的数据。
首先通过表格的id绑定一个唯一的列字段属性名（不是title后面的，是field后面的属性名）。
这里我们指定id为唯一列字段，因为这个id是数据库中的自增[主键]，不会重复。
columns属性是设置显示数据字段内容，其中field属性值需要和实体类对应。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| $('#userTable').bootstrapTable({
columns: [
.......
,{
title: '操作',
formatter: formaterProcess
}],
uniqueId:"id",
});
function formaterProcess(value, rows) {
return '<button class="btn btn-info">编辑</button> <button class="btn btn-danger" onclick="deleteUser('+ rows.id +')">删除</button>'
}
|
注：formaterProcess(value, rows) ： 其中参数value表示field对应实体类中的值，row为当前行的数据，（如果有第三个参数，则为当前行的索引）。
测试结果：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| // 删除用户
function deleteUser(userID){
if (confirm("确定要删除【" + userID + "】的用户吗？")) {
$.ajax({
url: 'http://localhost:8081/app/user?action=deleteUser',
type: 'get',
data: {userID: userID, action: 'deleteUser'},
dataType: 'json',
success: function (res){
console.log(res)
if(res.code>1) {
$('#exampleTableEvents').bootstrapTable('refresh');
console.log(res.msg);
} else {
console.log(res.msg);
}
},
})
}
console.log(userID);
}
|