Home > Article > Web Front-end > Detailed explanation of how to use Bootstrap Table
Detailed explanation of how to use Bootstrap Table
- PHPzOriginal
- 2017-01-04 11:12:5110116browse
Bootstrap-table Usage Summary
bootstrap-table is written on the basis of bootstrap-table and is a table plug-in specially used to display data. Bootstrap comes from Twitter and is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT, and has the advantages of simplicity, flexibility, and rapid front-end development. I won’t describe bootstrap and bootstrapping here. This article will focus on explaining some of my understanding of using bootstrap-table in my project and how to learn it.
【Related video recommendation: Bootstrap tutorial】
First, let’s explain the relationship between jquery, bootstrap, and bootstrap-table. Many parts of the bootstrap code involve jquery, which means that bootstrap relies on jquery, and the bootstrap-table we want to use is created on the basis of bootstrap, so before using bootstrap-table, you must reference jquery and bootstrap. js, css files.
Next, the characteristics of bootstrap-table: Compared with jquery-ui, jqgrid and other table display plug-ins, bootstrap-table is flat and lightweight. It is more than enough for some lightweight data display. , and the support for parent-child tables, etc. is also very good. The most important thing is that it can be seamlessly combined with other bootstrap tags.
Okay, that’s it for the introduction. After directly showing the code and renderings, we will discuss it further.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>bootstrap-table</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <script type="text/javascript" src="./js/jquery-2.2.1.js"></script> <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="./bootstrap-table/bootstrap-table-all.js"></script> <script type="text/javascript" src="./bootstrap-table/locale/bootstrap-table-zh-CN.js"></script> <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css" > <link rel="stylesheet" type="text/css" href="./bootstrap-table/bootstrap-table.min.css" > </head> <script language="javascript"> </script> <body> <div class="col-md-offset-3 col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title text-center">已添加教师账号</h3> </div> <div class="panel-body"> <div id="toolbar" class="btn-group"> <button id="btn_edit" type="button" class="btn btn-default" > <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </div> <table id="teacher_table" data-toggle="table" data-url="./data.php" data-method="post" data-query-params="queryParams" data-toolbar="#toolbar" data-pagination="true" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-page-size="5"> <thead> <tr> <th data-field="name">用户账号</th> <th data-field="pwd">用户密码</th> <th data-field="t_name">教师姓名</th> </tr> </thead> </table> </div> </div> </div> </body>
Rendering:
Okay, let’s analyze the meaning of the above code step by step.
1. First we need to download the corresponding jquery bootstrap bootstrap-table package. There are tutorials on these online, so I will not describe how to download them here.
It can be seen from the js and css file names quoted in the 93f0f5c25f18dab9d176bd4f6de5d30e tag above that we must import these files.
Note bootstrap, there are only three folders css, fonts, js in the downloaded and compiled compressed package
1. jquery-2.2.1.js ---- The latest jquery file
2. bootstrap.min.js --- The bootstrap.min.js compressed file in the latest bootstrap/js
3. bootstrap.min.css --- The latest bootstrap/css bootstrap.min.css compressed file
4.bootstrap-table-all.js ---The latest js file under bootstrap-table
5.bootstrap-table-zh-CN.js ----The latest Chinese initial file under bootstrap-table/locale
6.bootstrap-table.min.css ---The latest CSS compressed file under bootstrap-table
These six A must be configured, among which bootstrap-table-zh-CN.js is a js file that supports Chinese. Only when this file is loaded will some of our table display information be set to Chinese.
Let’s experiment with the display effect after removing bootstrap-table-zh-CN.js.
Of course, we can also set the display information to other languages, just replace bootstrap-table-zh-CN.js with js files in other languages. There is support in the bootstrap-table package.
We can also look at the source code in this file. If we look at it, we will know what this file does.
/**
* Bootstrap Table Chinese translation
* Author: Zhixin Wen<wenzhixin2010@gmail.com>
*/
(function ($) {
'use strict';
$.fn.bootstrapTable.locales['zh-CN'] = {
formatLoadingMessage: function () {
return '正在努力地加载数据中，请稍候……';
},
formatRecordsPerPage: function (pageNumber) {
return '每页显示 ' + pageNumber + ' 条记录';
},
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录，总共 ' + totalRows + ' 条记录';
},
formatSearch: function () {
return '搜索';
},
formatNoMatches: function () {
return '没有找到匹配的记录';
},
formatPaginationSwitch: function () {
return '隐藏/显示分页';
},
formatRefresh: function () {
return '刷新';
},
formatToggle: function () {
return '切换';
},
formatColumns: function () {
return '列';
}
};
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
})(jQuery); At a glance, you can tell that after referencing the js file, the initialization effect is prayed for when loading. Convert some display content into corresponding content.
2. Next let’s talk about the relevant html code. In fact, the only html code related to bootstrap-table is this part
<table id="teacher_table" data-toggle="table" data-url="./data.php" data-method="post" data-query-params="queryParams" data-toolbar="#toolbar" data-pagination="true" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-page-size="5"> <thead> <tr> <th data-field="name">用户账号</th> <th data-field="pwd">用户密码</th> <th data-field="t_name">教师姓名</th> </tr> </thead> </table>
Yes, there is only one table tag, plus There are a lot of parameters above, and the display form of the table is realized through these parameters. If you want to know what styles and functions there are, just relying on my list will definitely be a drop in the bucket. It is better to teach people to fish than to teach them how to fish. I will tell you where to find the meaning of these classes.class. We can go to the professional website of bootstrap-table to find a link I use. Click to open the link. If it is invalid, you can directly enter http://bootstrap-table.wenzhixin.net.cn/documentation
Of course You can also see some examples in example
How do we check the meaning of the corresponding parameters? Seeing the picture above, on the far right are some options. You can choose the settable table properties, row properties, and bindable events.
Click on the table properties Table options to display the following picture. First of all, you can see that the title Name is used to create tables with js, and Attribute is used to create tables with html.
举几个例子在我们上面的代码中有这么几个 参数他们的意思是：
data-url：索取数据的url。
data-method：请求方式。
data-height：设置表格的高
data-query-params="queryParams" ：设置
data-toolbar="#toolbar" ：设置装按钮的容器为id为toolbar的。
data-pagination="true" ：设置是否显示页码数
data-search="true" ：设置search框
data-show-refresh="true" ：设置刷新按钮
data-show-toggle="true" ：设置数据显示格式
这下你该明白怎么样查看了吧！
注意其中下面段代码是核心，a34de1251f0d9fe1e645927f19a896e8表示一行 b4d429308760b6c2d20d6300079ed38e一个格，data-field="name"表示一行中一个格子中的数据名 你可以把 data-field理解成id，因为后台传送过来的数据就是根据data-field的来区分，那个数据发送给谁的。
<thead> <tr> <th data-field="name">用户账号</th> <th data-field="pwd">用户密码</th> <th data-field="t_name">教师姓名</th> </tr> </thead>
对于不想用html静态生成，也可以使用js动态生成。给一个代码demo，要设置相关的参数只需要采用 上面讲的 Name:options 即可。例如在html中设置数据请求的目的文件 data-url："./data.php" 在js中只要声明 url:"./data.php"
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
});3.这样说，其他代码是干什么的，其中一部分代码是使用了 boostrap中的面板来设置格式，即将table镶嵌在面板中。 所去掉面板的代码后bootstrap-table的效果是这样的
仅仅是没有了面板而已。
4.传送数据的格式，bootstrap-table 接收的数据形式默认为json格式的
在上面可以看到请求的后台地址为:"./data.php",我们来看一下他的内容
<?php
$results[0]=array("name"=>"aoze","pwd"=>"20132588","t_name"=>"张三");
$results[1]=array("name"=>"lisi","pwd"=>"1234","t_name"=>"李四");
$results[2]=array("name"=>"wangwu","pwd"=>"44455","t_name"=>"王五");
echo json_encode($results);
?>很简单吧！ 当然这只是我手写的一些测试数据，在项目中当然是从数据库中查找出来的。
5.当然仅仅使显示数据有时候还是不够的，我们需要和table进行一些互动，比如进行一些删除，修改的功能，这时就需要用到bootstrap-table 的一些事件了。在上面的案例中我在table的中镶嵌了两个button组件如图
这个镶嵌的实现办法是在在table的属性中 添加了这么一行 data-toolbar="#toolbar"
其意思就是在工具栏的一行添加 id为toolbar的标签。
在本人做到这个项目中，要通过这两个按钮对table中点击选中的行进行相应的操作。
编写相应的事件，首先为table绑定一个选中的触发事件，然后通过getSelectRow函数获得点击选中行的数据。
$('#teacher_table').on('click-row.bs.table', function (e, row, element)
{
$('.success').removeClass('success');//去除之前选中的行的，选中样式
$(element).addClass('success');//添加当前选中的 success样式用于区别
}); function getSelectedRow()
{
var index = $('#teacher_table').find('tr.success').data('index');//获得选中的行
return $('#teacher_table').bootstrapTable('getData')[index];//返回选中行所有数据
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。
更多Bootstrap Table使用方法详解相关文章请关注PHP中文网！