Home >Web Front-end >Bootstrap Tutorial >Use Bootstrap-Table to achieve satisfactory table functions in 3 minutes
Use Bootstrap-Table to achieve satisfactory table functions in 3 minutes
- 青灯夜游forward
- 2021-04-30 11:00:102751browse
This article will share with you the usage of the table plug-in Bootstrap-Table based on Bootstrap and jQuery. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
1. Introduction
As you can tell from the project name, this is a Bootstrap table plug-in. The form of table display is almost always involved in all front-end work. Bootstrap Table provides a series of functions such as quick table creation, query, paging, sorting, etc. [Related recommendations: "bootstrap Tutorial"]
Project address: https://github.com/wenzhixin/bootstrap-table
possible Bootstrap and jQuery technologies are somewhat outdated, but if you are still using these two libraries due to historical technology selection or old projects, then this project will definitely make you smile, and it will be easy to meet the table display requirements. !
2. Mode
Boostatrp Table is divided into two modes: client mode and server mode.
Client: Display the data that the server needs to load at one time through the data interface, then convert it into json and generate a table. We can define the number of displayed rows, paging, etc. ourselves, and no requests will be sent to the server at this time.
Server: Send data to the server for query based on the set number of records per page and the current displayed page.
3. Practical Operation
Tips: The explanations are all shown in comments in the code. Please read carefully.
We use the simplest CDN introduction method, and the code can be run directly. Copy the code and configure the path to the json file to see the effect.
3.1 Get started quickly
The asterisk in the comment indicates that the parameter must be written, so let’s talk about the code without saying much. Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello, Bootstrap Table!</title>
// 引入 css
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<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.15.3/dist/bootstrap-table.min.css">
</head>
<body>
// 需要填充的表格
<table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>
// 引入js
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script>
window.operateEvents = {
// 当点击 时触发
'click .delete': function (e,value,row,index) {
// 在 console 打印出整行数据
console.log(row);
}
};
$('#tb_departments').bootstrapTable({
url: '/frontend/bootstrap-table/user.json', //请求后台的 URL（*）
method: 'get', //请求方式（*）
// data: data, //当不使用上面的后台请求时，使用data来接收数据
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为 true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "client", //分页方式：client 客户端分页，server 服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 6, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以个人感觉意义不大
strictSearch: true, //启用严格搜索。禁用比较检查。
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高，如果没有设置 height 属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
showExport: true, //是否显示导出
exportDataType: "basic", //basic', 'all', 'selected'.
columns: [{
checkbox: true //复选框标题，就是我们看到可以通过复选框选择整行。
}, {
field: 'id', title: 'ID' //我们取json中id的值，并将表头title设置为ID
}, {
field: 'username', title: '用户名' //我们取 json 中 username 的值，并将表头 title 设置为用户名
},{
field: 'sex', title: '性别' //我们取 json 中 sex 的值，并将表头 title 设置为性别
},{
field: 'city', title: '城市' //我们取 json 中 city 的值，并将表头 title 设置为城市
},{
field: 'sign', title: '签名' //我们取 json 中 sign 的值，并将表头 title 设置为签名
},{
field: 'classify', title: '分类' //我们取 json 中 classify 的值，并将表头 title 设置为分类
},{
//ormatter:function(value,row,index) 对后台传入数据 进行操作 对数据重新赋值 返回 return 到前台
// events 触发事件
field: 'Button',title:"操作",align: 'center',events:operateEvents,formatter:function(value,row,index){
var del = '<button type="button" class="btn btn-danger delete">删除</button>'
return del;
}
}
],
responseHandler: function (res) {
return res.data //在加载远程数据之前，处理响应数据格式.
// 我们取的值在data字段中，所以需要先进行处理，这样才能获取我们想要的结果
}
});
</script>
</body>
</html>The above code shows how to implement basic functions through basic APIs. The sample code does not list all APIs. There are many interesting functions in this library waiting for everyone to discover. As the saying goes, it is up to oneself to lead the master to practice~
3.2 Disassembly and explanation
The following are the key points It is explained to make it easier for friends to use the plug-in clearly.
3.2.1 Initialization part
选择需要初始化表格。
$('#tb_departments').bootstrapTable({})
这个就像table的入口一样。
<table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>3.2.2 Reading data part
columns:[{field: 'Key', title: '文件路径',formatter: function(value,row,index){} }]- field json middle key The Key
- title in the value pair is the content displayed in the table header.
- formatter is a function type that will be used when we need to modify the data content. Example: Encoding conversion
3.2.3 Event trigger
events:operateEvents
window.operateEvents = {
'click .download': function (e,value,row,index) {
console.log(row);
}
}Because many times we need to process tables, event triggers are a good choice. For example: it can record our row data, and can use triggers to execute customized functions, etc.
4. Extensions
Introducing several extensions that allow us to easily implement more table functions without having to invent our own wheels to make our work more efficient (you can also go to the official website to view the extensions For specific usage methods, the official has collected a large number of extensions). The old rules go directly to the code:
4.1 Table export
<script src="js/bootstrap-table-export.js"></script> showExport: true, //是否显示导出 exportDataType: basic, //导出数据类型，支持：'基本'，'全部'，'选中' exportTypes:['json', 'xml', 'csv', 'txt', 'sql', 'excel'] //导出类型
4.2 Automatic refresh
<script src="extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script> autoRefresh: true, //设置 true 为启用自动刷新插件。这并不意味着启用自动刷新 autoRefreshStatus: true, //设置 true 为启用自动刷新。这是表加载时状态自动刷新 autoRefreshInterval: 60, //每次发生自动刷新的时间（以秒为单位） autoRefreshSilent: true //设置为静默自动刷新
4.3 Copy row
<script src="extensions/copy-rows/bootstrap-table-copy-rows.js"></script> showCopyRows: true, //设置 true 为显示复制按钮。此按钮将所选行的内容复制到剪贴板 copyWithHidden: true, //设置 true 为使用隐藏列进行复制 copyDelimiter: ', ', //复制时，此分隔符将插入列值之间 copyNewline: '\n' //复制时，此换行符将插入行值之间
5. Summary
This article simply explains how to use Bootstrap-Table. Friends who are worried about implementing the table function can use this plug-in recommended by HelloGitHub. You will find that creating forms on a web page can be so fast, and I look forward to your friends discovering more interesting functions.
Note: The above js part does not use the function form. It is recommended to use the function form after you are familiar with it. This will also facilitate reuse and make the code look more standardized.
For more programming-related knowledge, please visit: Introduction to Programming! !
The above is the detailed content of Use Bootstrap-Table to achieve satisfactory table functions in 3 minutes. For more information, please follow other related articles on the PHP Chinese website!