簡單知識點例項之三：Bootstrap-Table和後臺進行百分百互動的簡單例項
阿新 • • 發佈：2018-11-01
這是一個針對前後臺互動的例子，可以直接套進專案中通暢執行。第二頁之所以資料不對，是因為例子畢竟沒有真正的後臺，所以資料不對。但是可以套入專案中，就正常了。
重點：
- 其中bootstrap-table有一個search:truse搜尋框的引數我沒有使用，而是自己寫了一個搜尋框，因為那個引數只針對client（客戶端資料才有效果，因為客戶端資料得到了所有的資料了，但是例子是和後臺互動的server服務端例子）
- sidePagination:'server'和‘client’區別在於前者是服務端互動資料，後者是客戶端得到所有資料後自行進行分頁和搜尋
- responseHandler是處理前期後臺傳給表格的資料欄位的繫結的函式
- queryParams是處理一系列操作（如分頁、搜尋、重新整理等）後，傳送給後臺處理資料的函式
- 後臺傳遞過來的資料最好是以以下格式：
{ "total":20, "offset":1, "limit":10, "rows"[ { "id": 0, "name": "Item 0" },{ "id": 1, "name": "Item 1" } ], }
二、具體程式碼：裡面有詳細註解{ "total": 12, "offset":1, "limit":10, "data": [ { "id": 0, "name": "Item 0", "datetime": 1372751992000 },{ "id": 1, "name": "Item 1", "datetime": 1372751992000 },{ "id": 2, "name": "Item 2", "datetime": 1372751992000 },{ "id": 3, "name": "Item 3", "datetime": 1372751992000 },{ "id": 4, "name": "Item 4", "datetime": 1372751992000 },{ "id": 5, "name": "Item 5", "datetime": 1372751992000 },{ "id": 6, "name": "Item 6", "datetime": 1372751992000 },{ "id": 7, "name": "Item 7", "datetime": 1372751992000 },{ "id": 8, "name": "Item 8", "datetime": 1372751992000 },{ "id": 9, "name": "Item 9", "datetime": 1372751992000 },{ "id": 10, "name": "Item 10", "datetime": 1372751992000 },{ "id": 11, "name": "Item 11", "datetime": 1372751992000 } ] }
三、具體介面<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="css/bootstrap.3.3.7.css" rel="stylesheet"> <link href="css/bootstrap-theme.css" rel="stylesheet"> <link href="css/bootstrap-table.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap3.3.7.min.js"></script> <script type="text/javascript" src="js/bootstrap-table.js"></script> <script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script> <script type="text/javascript"> $(function () { var $table = $("#table"); $table.bootstrapTable({ url:'url/bootstrapTable.json', dataType:'json', pagination:true,//分頁 paginationPreText:'上一頁', paginationNextText:'下一頁', striped:true,//條紋 height:650, showColumns:true,//內容列下拉框 showRefresh:true,//重新整理按鈕 sidePagination:"server",//服務端分頁，還有client，不過不認為除非想玩單機版的，基本都是由服務端進行分頁 toolbar:"#toolbar", responseHandler:responseHandler,//接受後臺傳過來的值進行繫結處理的函式 queryParamsType:"undefined", queryParams:queryParams,//一系列操作後向後臺傳送引數的函式 columns:[ { title:"編碼", field:"id", align:'center', valign:"middle" },{ title:"名稱", field:"name", align:'center', valign:"middle" },{ title:"建立時間", field:"datetime", align:'center', formatter:function (value,row,index) { //日期時間戳轉換 var time = new Date(value); var y = time.getFullYear();//年 var m = time.getMonth() + 1;//月 var d = time.getDate();//日 var h = time.getHours();//時 var mm = time.getMinutes();//分 var s = time.getSeconds();//秒 return y+"-"+m+"-"+d+" "+h+":"+mm+":"+s; } },{ title:"操作", align:'center', formatter:function (value,row,index) { var a = "<a href='#' onclick='method()'>修改</a>"; var b = "<a href='#' onclick='method()'>刪除</a>"; return a+b; } } ] }); }); function responseHandler(res){ return{ 'total' : res.total, "rows" : res.data, "offset" : res.offset, "limit" : res.limit } } function queryParams(params){ //一系列操作後向後臺傳遞的引數，這裡可以傳搜尋框的值 var searchName = $("#searchName").val(); return{ "pageNumber" : params.pageNumber, "pageSize" : params.pageSize, "searchName" : searchName } } function method() { //修改和刪除的方法 alert("修改和刪除的方法"); } </script> </head> <body> <div id="toolbar"> <form class="form-inline"> <div class="form-group"> <label class="control-label">搜尋名稱</label> <input type="text" class="form-control" id="searchName"/> </div> <button type="submit" class="btn btn-default">搜尋</button> </form> </div> <table id="table"></table> </body> </html>
四、具體程式碼下載：（要用webstrom執行才可看到資料）
http://download.csdn.net/download/miss_ll/10204235