Bootstrap table Use experience summary _javascript skill

have been investigating our management background using the form control, query to: http://bootstrap-table.wenzhixin.net.cn's bootstrap table feels pretty good, but because the official document is not how to improve, Cause your own network data request has not been passed.

Today finally debugging through, here to share with you.

Introduction of related configuration files

<!--jquery file.
Be sure to introduce--> <script src= "//cdn.bootcss.com/jquery/1.11.3/jquery.min.js" before Bootstrap.min.js ></script> <link rel= "stylesheet" href= "//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" > <script src= "/ Cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js "></script> <!--bootstrap table--> <link href = "//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.css" rel= "stylesheet" > <script src= "/ Cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.js "></script> <script src="// Cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table-locale-all.js "></script> <script src="// Cdn.bootcss.com/bootstrap-table/1.11.0/extensions/export/bootstrap-table-export.min.js "></script> < !--bootstrap table contains Excel export, PDF export--> <script src= "Https://rawgit.com/hhurz/tableExport.jquery.plugin/master /tableexport.js "></script> <script src="//cdn.bootcss.com/filesaver.js/2014-11-29/filesAver.min.js "></script>

 

NOTE!!!!! Here the tableexport.js is not BOOTCDN on the Tableexport, when used to look at the author, not to be able to export Excel

Ii. Writing headers and toolbars

In fact, the entire head of the writing is very simple, just a few simple configuration.

note that the properties of each bean are written in th
Note Bindings Toolbar

You can refer to the following configuration

<!--toolbar buttons, you can customize the event--> <div id= "toolbar" class= "Btn-group" > <button type= "button" class= "Btn Btn-defaul T "> <i class=" Glyphicon glyphicon-plus "></i> </button> <button type=" button "class=" Btn btn-de Fault "> <i class=" Glyphicon glyphicon-heart "></i> </button> <button type=" button "class=" Btn B Tn-default "> <i class=" Glyphicon glyphicon-trash "></i> </button> </div> <table id=" Demo "class=" table table-striped table-hover table-bordered "data-toolbar=" #toolbar "//the toolbar must be bound, otherwise the layout will be garbled data-search=" Tru E "data-show-refresh=" true "data-show-columns=" true "data-show-export=" true "data-export-types=" [' Excel '] "Data-exp Ort-options= ' {//exported filename "filename": "Products", "WorksheetName": "Products"} ' > <thead> <tr> ; th width= "3%" data-field= "prodId" > Products id</th> <th width= "10%" data-field= "nameofproduct" > Product name </th > <th width= "4%" data-field="CategoryID" > Product category </th> <th width= "5%" data-field= "domicileofcapital" > Capital type </th> <th width= "8 % "data-field=" Underwriter > Distributor </th> <th width= "6%" data-field= "managementinstitution" > Fund company </th > <th width= "5%" data-field= "ManagementInstitution2" > Management Organization </th> <th width= "3%" data-field= "flag" > Corner Mark </th> <th width= "7%" data-field= "BeginTime" > Online time </th> <th width= "7%" data-field= "Endtime" > Offline time </th> <th width= "4%" data-field= "status" > Release status </th> <th width= "4%" Fundraisingstatus "> Fundraising status </th> <th width=" 3% "data-field=" Totalscore "> Scoring </th> <th width=" 3% " data-field= "Modesofguaranteescore" > Warranty </th> <th width= "3%" data-field= "Invsetmenttargetscore" > Investment </th> <th width= "3%" data-field= "Underwriterscore" > Issue </th> <th width= "3%" data-field= " Sourceofpaymentscore "> Repayment </th> <th width=" 3% "data-field=" issuErdescriptionscore "> Financing </th> <th width=" 10% "> Operation </th> </tr> </thead> </table>

 

Third, binding back-end logic

Because the Bootstrap table is submitted by default using form forms, its paging parameters and query parameters are inconsistent with our backend logic protocols. (The official lack of this part of the document)

So, we need to make a custom configuration more with its protocol.

$ (function () {$ ("#demo"). Bootstraptable ({url: "Http://ydjr.dev.chengyiwm.com/goldman-mgr/listProduct", Sortname: " ProdId ",//Platoon sequence striped:true,//Line sidepagination:" Server ",//server paging Clicktoselect:true,//Select row Select CheckBox Single Select:true,//Only allow radio Searchonenterkey:true,//enter key Search pagination:true,//Enable paging escape:true,//filter Dangerous characters Querypara

Ms:getparams,//Carry parameter method: "POST",//Request format Responsehandler:responsehandler,});


});
 /** * The default load with the parameter * * to convert the param parameter to CY's request logic Protocol/function Getparams (params) {var query = $ ("#searchKey"). Val ();
 Console.log (Json.stringify (params)); return {head: {userId: "11154", Skey: "6fc19fce5d8dcf130954d8ae2cadb30a", Platform: "PC", IMEI: "", Appversio
  N: "", Cityid: "", Platformversion: "", DeviceId: "", Channel: "", Protoversion:1, Ispreview:2}, Body: {
 ' Query ': params.search,//Search parameter ' start ': params.offset,//pagination start position ' pageSize ': params.limit,//per page number of}}/** * Get the returned data when doing the appropriate processing, so thatBootstrap table know our return format * @param {Object} RES/function ResponseHandler (res) {returns {"Rows": Res.body.listProduc

 T,//specific list of each Bean "total": res.body.totalCount//number of data returned}}

OK after the completion of the configuration to give you a look at our display effect:

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