Bootstrap table use method _javascript skills

Summary of the use of bootstrap-table

Bootstrap-table is written on the basis of bootstrap-table, a tabular plug-in designed to display data. And Bootstrap is from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, JAVASCRIPT, with a simple and flexible, fast front-end development advantages. To and Bootstrap here is not a narrative. This article will focus on some of the understanding and how to learn about bootstrap-table in the project.

First of all, jquery, Bootstrap, bootstrap-table the relationship between the three. Bootstrap many parts of the code involve jquery, which means that bootstrap is dependent on jquery, and the bootstrap-table we're going to use is created on a bootstrap basis, Therefore, you must refer to the relevant JS,CSS files for jquery and bootstrap before using bootstrap-table.

Next, bootstrap-table features: And Jquery-ui,jqgrid, such as table display Plug-ins, Bootstrap-table flat, lightweight, for some lightweight data display, he is more than enough, and the parent-child table, such as support is also good, The main thing is that it can be seamlessly combined with other tags in the bootstrap.

OK, the introduction to this, directly on the code and Effect diagram, and then do further discussion.

<! 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=" "/> <scrip T 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 " >  

Effect Chart:

OK, let's take a step-by-step look at the meaning of the above code.

1. First we need to download the corresponding jquery bootstrap bootstrap-table packages, which have tutorials on the web and no longer describe how to download them.

From the above

Note Bootstrap, download the compiled compressed package only three folders css, fonts, JS

1. Jquery-2.2.1.js----The latest jquery file

2. Bootstrap.min.js---The latest bootstrap/js bootstrap.min.js compressed files

3.BOOTSTRAP.MIN.CSS---The latest bootstrap/css bootstrap.min.css compressed files

4.bootstrap-table-all.js---js file under the latest bootstrap-table

5.bootstrap-table-zh-cn.js----The Chinese initial file under the latest Bootstrap-table/locale

6.BOOTSTRAP-TABLE.MIN.CSS---The latest bootstrap-table to compress files under CSS

These six must be configured, where bootstrap-table-zh-cn.js is to support the Chinese JS file, only loaded this file some of our table display information will be set into Chinese.

Let's experiment to see how the Bootstrap-table-zh-cn.js is removed.

Of course, we can also set the display information into other languages, as long as the bootstrap-table-zh-cn.js into other languages JS file can be. There is support in the Bootstrap-table package.

We can also look at the source code in this file, we have a look, we know what the file has done.

/** * Bootstrap Table Chinese translation * Author:zhixin wen<wenzhixin2010@gmail.co

 m> * * (function ($) {' Use strict ';
 $.fn.bootstraptable.locales[' zh-cn ' = {formatloadingmessage:function () {return ' is trying to load the data, please wait ... ';
 }, Formatrecordsperpage:function (pagenumber) {return ' shows ' + pagenumber + ' record ' per page];  }, Formatshowingrows:function (Pagefrom, PageTo, totalrows) {return ' shows the first ' + Pagefrom + ' to the first ' + PageTo + ' record, total ' +
 Totalrows + ' record ';
 }, Formatsearch:function () {return ' search ';
 }, Formatnomatches:function () {return ' did not find a matching record ';
 }, Formatpaginationswitch:function () {return ' hide/show paging ';
 }, Formatrefresh:function () {return ' refresh ';
 }, Formattoggle:function () {return ' toggle ';
 }, Formatcolumns:function () {return ' column ';

 }
 };

$.extend ($.fn.bootstraptable.defaults, $.fn.bootstraptable.locales[' ZH-CN '));
}) (JQuery); 

A cursory glance to know that, after referencing the JS file, in the load, they prayed for the initialization effect. Convert some of the displayed information to the appropriate content.

2. then we have the relevant HTML code, which is actually the only part of the HTML code associated with 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>
 

Yes, there is only one table tag, plus a whole bunch of parameters, and the form is implemented through these parameters. To know what styles and functions, just rely on my list must be bucket, teach people to fish than to teach people to fishing, I tell you where to find these classes. The meaning of class. We can go to bootstrap-table professional website to look up this has a link that I use, click Open Link If invalid can enter http://bootstrap-table.wenzhixin.net.cn/documentation directly

Of course, I can see some examples in example.

How do we look at the meaning of the corresponding parameters? See above this picture, the rightmost is some options, you can choose this can set the table properties, line properties, and bindable events.

Click the Table Properties table options Display the following figure, first see the title name used for JS CREATE TABLE is used, and attribute is HTML CREATE table use,

For a few examples, there are a few parameters in the code above that they mean:

data-url: The URL that requests the data.
Data-method: request method.
data-height: Set the height of the table
data-query-params= "Queryparams": setting
data-toolbar= "#toolbar": set the container for the Mount button to be toolbar.
data-pagination= ' true ': set whether the page number is displayed
data-search= ' true ': Set search box
data-show-refresh= ' true ': set Refresh button
data-show-toggle= ' true ': set data display format

Now you know how to look at it!

Note that the following code is the core,<tr> represents a row <th> a lattice, data-field= "name" means the name of a grid in a row you can interpret Data-field as an ID, Because the data from the background is based on the Data-field to differentiate, that data sent to whom.

<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>

For those who do not want to use HTML static generation, you can also use JS dynamic generation. To a code demo, to set the relevant parameters only need to use the above mentioned name:options can be. For example, set the destination file for a data request in HTML Data-url: "./data.php" in JS just declare the 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
 : ' $ '
 , {
 id:2,
 name: ' Item 2 ', Price
 : ' $ '}
 ]
;

3. in this way, what other code is doing, part of the code is to use the Boostrap in the panel to format, the table is embedded in the panel. Remove the panel code after the bootstrap-table effect is this

It just doesn't have a panel.

4. Transfer data format, Bootstrap-table received data form default to JSON format

On the above you can see that the requested background address is: "./data.php", let's take a look at his content.

<?php 

 $results [0]=array ("name" => "Aoze", "pwd" => "20132588", "T_name" => "John");
 $results [1]=array ("name" => "Lisi", "pwd" => "1234", "T_name" => "Dick");
 $results [2]=array ("name" => "Wangwu", "pwd" => "44455", "T_name" => "Harry");
 echo Json_encode ($results);

? >

It's simple! Of course, this is just some of my handwritten test data, in the project, of course, from the database to find out.

5. Of course just make the display of data sometimes is not enough, we need and table to do some interaction, such as some delete, modify the function, then need to use some of the bootstrap-table events. In the case above, I have two button components embedded in the table, as shown in

This mosaic is implemented by adding a line of data-toolbar= "#toolbar" to the properties of the table

This means adding a label with ID toolbar on one line of the toolbar.

In this project, I want to use these two buttons to click on the selected row in the table to do the appropriate action.

To write the appropriate event, first bind a selected trigger event for the table, and then get the data for clicking on the selected row via the Getselectrow function.

$ (' #teacher_table '). On (' Click-row.bs.table ', function (e, row, Element) 
{
 $ ('. Success '). Removeclass (' Success ');//Remove previously selected row, select Style
 $ (element). addclass (' success '); Add the currently selected success style for Difference
}); function Getselectedrow () 
{
 var index = $ (' #teacher_table '). Find (' tr.success '). Data (' index ');//Get the selected row
 return $ (' #teacher_table '). Bootstraptable (' GetData ') [index];//returns all data in the selected row
}

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Table Use Tutorial

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.