Summary of bootstrap-table usage
bootstrap-table is a table plug-in written on the basis of bootstrap-table, specially used to display data. bootstrap is from Twitter and is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT, and has the advantages of simple, flexible and fast front-end development. I will not describe the same as bootstrap here. This article will focus on explaining some of my understanding of using bootstrap-table in my project and how to learn it.
First, let me explain the relationship between jquery, bootstrap, and bootstrap-table. Many parts of bootstrap code involve jquery, that is, bootstrap depends on jquery, and the bootstrap-table we want to use is created based on bootstrap, so before using bootstrap-table, you must refer to the related js and css files of jquery and bootstrap.
Next, the characteristics of bootstrap-table: 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 father-son tables and so on is also very good. The most important thing is that it can be seamlessly combined with other bootstrap tags.
Okay, that’s all for the introduction. I will directly upload the code and renderings and then give further discussions.
<!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> <div> <div> <div> <h3>Added teacher account</h3> </div> <div> <div id="toolbar"> <button id="btn_edit" type="button" > <span aria-hidden="true"></span>Modify</button> <button id="btn_delete" type="button"> <span aria-hidden="true"></span>Delete</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"> <tr> <th data-field="name">User account</th> <th data-field="pwd">User password</th> <th data-field="t_name">Teacher name</th> </tr> </table> </div> </div> </div></body>
Reproduction image:
OK Next, let’s analyze the meaning of the above code in steps.
1. First of all, we need to download the corresponding jquery bootstrap bootstrap-table package. There are tutorials online, and we will not describe how to download it here.
From the reference to the js and css file names in the above <head> tag, we can see that we must introduce these files.
Note bootstrap, there are only three folders in the compiled compressed package.
1.jquery-2.2.1.js --- The latest jquery file
2.bootstrap.min.js --- The latest bootstrap.min.js compressed file in bootstrap/js
3.bootstrap.min.css ---The latest bootstrap.min.css compressed file in bootstrap/css
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 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 are support in the bootstrap-table package.
We can also look at the source code in this file. Let’s take a look and you will know what this file does.
/** * Bootstrap Table Chinese translation * Author: Zhixin Wen<[email protected]> */(function ($) { 'use strict'; $.fn.bootstrapTable.locales['zh-CN'] = { formatLoadingMessage: function () { return 'Work hard to load the data, please wait...'; }, formatRecordsPerPage: function (pageNumber) { return 'Showing per page' + pageNumber + 'Record'; }, formatShowingRows: function (pageFrom, pageTo, totalRows) { return 'Show ' + pageFrom + ' to ' + pageTo + pageTo + ' records, total ' + totalRows + ' records'; }, formatSearch: function () { return 'Search'; }, formatNoMatches: function () { return 'No matching record was found'; }, formatPaginationSwitch: function () { return 'Hide/Show paging'; }, formatRefresh: function () { return 'Refresh'; }, formatToggle: function () { return 'Switch'; }, formatPaginationSwitch: function () { return 'Hide/Show paging'; }, formatRefresh: function () { return 'Refresh'; }, formatToggle: function () { return 'Switch'; }, formatColumns: function () { return 'column'; } }; $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);})(jQuery);
You can see at a glance that after quoting the js file, when loading, you pray for the initialization effect. Convert some displayed information into the corresponding medium content.
2. Next, let’s talk about the relevant html code. In fact, this is the only part of the html code related to bootstrap-table.
<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">User account</th> <th data-field="pwd">User password</th> <th data-field="t_name">Teacher name</th> </tr> </thead> </table>
Yes, there is only one table tag, plus a lot of parameters, and the form of the table is implemented through these parameters. You should know what styles and functions are there. Just by listing them, it will definitely be a drop in the bucket. It is better to teach people how to fish than to teach people how to fish. I will tell you where to find these categories. The meaning of 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 the example
How do we check the meaning of the corresponding parameters? When you see the picture above, the right side is some options, you can choose the table attributes, row attributes, and binding events that you can set.
Click the table attribute Table options to display the following figure. First, you can see that the title Name is used for JS to create tables, and Attribute is used for HTML to create tables.
To give a few examples, there are several parameters in our above code. What they mean is:
data-url: The url for requesting data.
data-method: request method.
data-height: set the height of the table
data-query-params="queryParams" : Settings
data-toolbar="#toolbar": Set the container to which the button is id is toolbar.
data-pagination="true": Set whether to display the page number
data-search="true": Set the search box
data-show-refresh="true": Set the refresh button
data-show-toggle="true": Set the data display format
Now you should understand how to check it out!
Note that the following code is the core, <tr> represents a grid in a row, and data-field="name" represents the data name in a grid in a row. You can understand data-field as id, because the data transmitted from the background is distinguished based on the data-field, and who is sent to.
<tr> <th data-field="name">User account</th> <th data-field="pwd">User password</th> <th data-field="t_name">Teacher name</th> </tr></thead>
For those who do not want to use html static generation, you can also use js to generate dynamic generation. To give a code demo, to set the relevant parameters, you only need to use Name:options mentioned above. For example, set the destination file data-url for data request in html: "./data.php" In js, just declare 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. In this way, what do other codes do, part of the code uses the panel in boostrap to format, that is, to embed the table in the panel. The effect of bootstrap-table after the removed panel code is like this
It's just that there is no panel.
4. The format of data transmission, the data received by bootstrap-table is in json format by default
You can see above that the requested background address is: "./data.php", let's take a look at its content
<?php $results[0]=array("name"=>"aoze","pwd"=>"20132588","t_name"=>"Zhang San"); $results[1]=array("name"=>"lisi","pwd"=>"1234","t_name"=>"Li Si"); $results[2]=array("name"=>"wangwu","pwd"=>"44455","t_name"=>"Wang Wu"); echo json_encode($results);?>It's very simple! Of course, this is just some test data I have written by hand, and of course it is found from the database in the project.
5. Of course, it is not enough to just display data. We need to interact with the table, such as deletion and modification functions. At this time, we need to use some events of bootstrap-table. In the above case, I have embedded two button components in the table as shown in the figure
The method of implementing this mosaic is to add such a line data-toolbar="#toolbar" to the table's properties.
It means adding a label with id as toolbar to a line in the toolbar.
In my implementation of this project, you must use these two buttons to perform corresponding operations on the selected row in the table.
Write the corresponding event, first bind a selected trigger event to the table, and then obtain the data of the selected row through the getSelectRow function.
$('#teacher_table').on('click-row.bs.table', function (e, row, element) { $('.success').removeClass('success');//Remove the previously selected row, select the style $(element).addClass('success');//Add the currently selected success style for the difference}); function getSelectedRow() { var index = $('#teacher_table').find('tr.success').data('index');//Get the selected row return $('#teacher_table').bootstrapTable('getData')[index];//Return all data in the selected row}If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap Table usage tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.