Bootstrap table Use experience summary _javascript skill

Source: Internet
Author: User
Tags button type

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.