JS Component Series Bootstrap table Table component artifact "Terminator" _javascript tips

Bootstrap Table Series:

JS Table component Artifact Bootstrap table detailed (basic version)

JS Component Series Bootstrap table Table component artifact "Terminator"

JS Component Series Bootstrap table Table component Artifact "second, parent-child table and row and column sequence"

Bootstrap table is lightweight and feature-rich data displayed in tabular form, supporting radio, check boxes, sorting, paging, show/Hide columns, fixed title scrolling table, responsive design, AJAX loading JSON data, click Sorted columns, card views, etc. So this article to introduce JS Component Series Bootstrap table component Artifact "End", study together!

One, the effect shows

1, table row style

For example, we have a need to display order pages, different status orders show different colors, as shown in the figure:

2. Table in-line edit

The first part of the time has asked the blogger whether the owner can support the effect of inline editing, the answer is yes. Let's take a look at the effects first:

Before editing

Click on a cell data

After editing completes

3. Combination of tables and columns

The demand for the combination of rows and columns is very common, especially when it comes to making page reports. First look at the effect:

The current page does not display full, click Enter to see. What do you think? It's a good result.

4. Tabular Data Export

For tabular data export, bootstrap table supports three modes of export: Basic, all, selected. This is the current page data export, all data export, selected data export. It also supports exporting multiple types of files, such as common Excel, XML, JSON, and so on.

Export current page to Excel

Export all table data

Export selected row data

As for other types of file export, and Excel is basically the same, do not show the effect.

Second, table row style code example

About the table row's style setting, other is it a most basic function, why should put it in the third article? It's because bloggers think it might be useful everywhere. Of course, the effect is not difficult, their own jquery set TR background color can also be implemented, but bloggers feel that since bootstrap table provides a mechanism to set the background color of the row, why don't we use its built-in API. Let's see how it is implemented.

When the table is initialized

　　　　 Initializes table $ (' #tb_order '). bootstraptable ({url: '/tablestyle/getorder ',//Request background URL (*) method: ' Get ',//Request mode (*)//too Lbar: ' #toolbar ',//tool button with which container striped:true,//whether to display row interval color cache:false,//whether to use the cache, the default is true, so the general need to set this property (*) Pagination:
True,//whether to display paging (*) Sortable:false,//whether to enable sorting SortOrder: "ASC",//Sort queryparams:otableinit.queryparams,//Pass parameters (*)
Sidepagination: "Server",//Paging: Client client page, Server service end Paging (*) pagenumber:1,//Initialize load first page, default first page pagesize:10,//page number of record rows (*) PageList: [10, 25, 50, 100],//selectable number of rows per page (*) Search:true,//whether to display a form search, this search is the client search, will not enter the service side, so, the sense of personal feeling is not strictsearch:true, SH Owcolumns:true,//whether to display all columns showrefresh:true,//whether to display the refresh button minimumcountcolumns:2,//minimum allowable number of columns clicktoselect:true,//whether to enable the click Select row height:500,//row height, if the Height property is not set, the table automatically finds the table height uniqueId according to the number of records: "ID",//The unique identification of each row, general primary key column showtoggle:true,// Whether to show the detailed view and List view toggle button Cardview:false,//whether to display the detailed view detailview:false,//whether to display a parent-child table rowstyle:function (row, index) {//Here are 5 values representing 5 Medium color [' active ', ' success ', ' info ', ' warning ', ' danger '];
var strclass = ""; if (row. Order_status = = "to be discharged") {strclass = ' success ';//There is also an active} else if (row. Order_status = = "deleted") {strclass = ' danger ';} else {return {};} return {Classes:strclass}}, Columns: [{checkbox: True}, {field: ' Order_no ', title: ' Order Number '}, {field: ' Order_type ', title: ' Order type '}, {field: ' Order_status ', title: ' Order Form  State '}, {field: ' Remark ', title: ' Remarks '},]};

In fact, the emphasis is on this parameter:

Rowstyle:function (row, index) {
///Here are 5 values representing the colors in 5 [' Active ', ' success ', ' info ', ' warning ', ' danger '];
var strclass = "";
if (row. Order_status = = "to be discharged") {
strclass = ' success ';//There is also an active
}
else if (row. Order_status = = "deleted") {
strclass = ' danger ';
}
else {return
{};
}
return {Classes:strclass}

Bootstrap table supports the row background color of the table in 5, which is ' active ', ' success ', ' info ', ' warning ', ' danger ', and for each corresponding background color, the code can be seen as it runs. As for the return value of this method, the blogger has been studying for the first time, in accordance with the rules of bootstrap table, you must return a JSON-formatted object such as: {Classes:strclass}.

Third, the table row in the Edit code example

For table inline editing, you need to use several JS files that bootstrap table expands.

1, the introduction of additional JS files

<link rel= "stylesheet" href= "//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/ Bootstrap-editable.css ">
<script src="//rawgit.com/vitalets/x-editable/master/dist/ Bootstrap3-editable/js/bootstrap-editable.js "></script>

2, in the Cshtml page definition table, add two properties

<table id= "tb_departments" >
<thead>
<tr>
<th data-field= "Name" data-editable= " True "> Department name </th>
<th data-field=" ParentName "> Parent Department </th>
<th data-field=" level " Data-editable= "true" > Departmental level </th>
<th data-field= "Desc" data-editable= "true" > Description </th>
</tr>
</thead>

If it is initialized in JS, it is written as follows:

{
field: ' Name ',
title: ' Name ',
editable:true
}

3, in JS initialization of the table when the registration edit Save Events

$ (' #tb_departments '). bootstraptable ({
URL: '/editable/getdepartment ',//Request background URL (*)
method: ' Get ',//Request mode ( *)
toolbar: ' #toolbar ',//tool button with which container
striped:true,//whether to display row interval color
cache:false,//whether to use the cache, default to True, So in general you need to set this property (*)
pagination:true,//whether to display paging (*)
sortable:false,//whether to enable sorting
SortOrder: "ASC",//sorting method
queryparams:otableinit.queryparams,//Pass parameter (*)
sidepagination: "Server",//Paging: Client Client page paging, Server service End Paging (*)
pagenumber:1,//Initialize load first page, default first page
Pagesize:10,//per page record rows (*)
oneditablesave:function ( field, row, OldValue, $el) {
$.ajax ({
type: "Post",
URL: "/editable/edit",
data: {strjson: Json.stringify (Row)},
success:function (data, status) {
if (status = = "Success") {
alert ("Edit succeeded");
} }
,
error:function () {
alert ("error");
},
complete:function () {
}}
);

The point is to look at how this event is handled.

Oneditablesave:function (field, row, OldValue, $el) {
$.ajax ({
type: "Post",
URL: "/editable/edit",
Data: {strJson:JSON.stringify (Row)},
success:function (data, status) {
if (status = = "Success") {
alert ("edited Success ");}
,
error:function () {
alert (" error ");
},
complete:function () {
}
});

The corresponding method needs to handle the saved logic itself. Four parameter field, row, OldValue, $el corresponding to the name of the column, the current row data object, the value before the update, the edited current cell's jquery object.

Iv. table rows and columns merging code examples

Table row and column merge function does not refer to other JS files, only need to use the table in the Cshtml page colspan and rowspan can be achieved.

1, cshtml page

<table id= "Tb_report" > <thead> <tr> <th colspan= "4" data-valign= "Middle" data-align= "center" > First quarter </th> <th colspan= "4" data-valign= "Middle" data-align= "center" > second quarter </th> <th colspan= "4" Data-valign= "Middle" data-align= "center" > third quarter </th> <th colspan= "4" data-valign= "Middle" data-align= " Center "> Fourth quarter </th> <th data-field=" TotalCount "rowspan=" 2 "data-valign=" Middle "data-align=" center "> Annual Summary </th> </tr> <tr> <th data-field= "jancount" data-align= "center" > January </th> <th Data-field= "Febcount" data-align= "center" > February </th> <th data-field= "marcount" data-align= "center" > March </th> <th data-field= "firstquarter" data-align= "center" > First quarter </th> <th data-field= "Aprcount" data-align= "center" > April </th> <th data-field= "maycount" data-align= "center" > May </th> <th Data-field= "Juncount" data-align= "center" > June </th> <th data-field= "Secondquarter" Data-align= "center" > second quarter </th> <th data-field= "julcount" data-align= "center" > July </th> <th Data-field= "Agucount" data-align= "center" > August </th> <th data-field= "sepcount" data-align= "center" > September </th> <th data-field= "thirdquarter" data-align= "center" > third quarter </th> <th data-field= "Octcount" data-align= "center" > October </th> <th data-field= "novcount" data-align= "center" > November </th> <th Data-field= "Deccount" data-align= "center" > December </th> <th data-field= "forthquarter" data-align= "center"  > Fourth quarter </th> </tr> </thead> </table>

2, JS initialization and no special

$ (' #tb_report '). bootstraptable ({
URL: '/groupcolumns/getreport ',//Request background URL (*)
method: ' Get ',//Request (*)
toolbar: ' #toolbar ',//tool button with which container
striped:true,//whether to display row interval color
cache:false,//whether to use the cache, default to True, So in general you need to set this property (*)
pagination:true,//whether to display the paging (*)
SortOrder: "ASC",//Sorting mode
queryparams: otableinit.queryparams,//Pass Parameter (*)
sidepagination: "Server",//Paging: Client Client page paging, Server service end Paging (*)
Pagenumber:1,//initialization load first page, default first page
pagesize:10,//page record rows (*)
pagelist: [10, 25, 50, 100],//Number of rows per page available (*)

How, there is no very simple. Of course, someone said, you can not use JS initialization, directly in the cshtml with the properties of the table to set the URL, paging and other information. Indeed, if we look at its API, we find that each of its initialized attributes corresponds to the properties of a table. Type as

If your form does not have some special events to deal with, this is no problem at all.

V. Tabular data Export code example

The export function of tabular data also requires some extended JS support.

1, the introduction of additional JS files

<script src= "~/content/bootstrap-table/extensions/export/bootstrap-table-export.js" ></script>
<script src= "//rawgit.com/hhurz/tableexport.jquery.plugin/master/tableexport.js" ></script>

2, JS initialization of the time

$ (' #tb_departments '). bootstraptable ({
URL: '/export/getdepartment ',//Request background URL (*)
method: ' Get ',//Request (*)
toolbar: ' #toolbar ',//tool button with which container
striped:true,//whether to display row interval color
cache:false,//whether to use the cache, default to True, So in general you need to set this property (*)
pagination:true,//whether to display paging (*)
sortable:false,//whether to enable sorting
SortOrder: "ASC",//sorting method
queryparams:otableinit.queryparams,//Pass parameter (*)
sidepagination: "Client",//Page Paging: Client Client page paging, Server service End page ( *)
pagenumber:1,//Initialize load first page, default first page
Pagesize:10,//per page record row number (*)
pagelist: [10, 25, 50, 100],//per page number of rows to select ( *
clicktoselect:true,
showexport:true,//whether to display export
exportdatatype: "Basic",//basic ', ' All ', ' Selected '.
Columns: [{
checkbox:true
}, {
field: ' Name ',
title: ' Department name '
}, {
field: ' ParentName ', C24/>title: ' Superior department '
}, {
field: ' Level ',
title: ' Departmental Levels '
}, {
field: ' Desc ',
title: ' Description '
}, ]

But here's the point: these two properties

Showexport:true,//whether to display export
exportdatatype: "Basic",//basic ', ' All ', ' selected '.
Showexport indicates whether the exported button is displayed, Exportdatatype indicates if the exported mode is the current page, all data, or the selected data.

Vi. Summary

The above is the function of the effect and the implementation of the simple code. Bloggers found several problems to be resolved.

1, in-line editing function is every cell submitted to the background, which will cause the frequent operation of the database, the feeling is not appropriate. Don't know if there's a better way to submit each line to the background.

2, although the export function is very easy to use, but unfortunately does not support IE browser, Bo Master tried the official website above the example, as if IE also export. Pending verification.

The above is a small series to introduce the JS Component Series Bootstrap table component Artifact "End" of the relevant content, I hope to help you!