1慈俯、下載：
https://github.com/wenzhixin/bootstrap-table
2归苍、文檔：
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
3、引用：
<link rel="stylesheet" href="bootstrap.min.css"><link rel="stylesheet" href="bootstrap-table.css"> <script src="jquery.min.js"></script><script src="bootstrap.min.js"></script><script src="bootstrap-table.js"></script><script src="bootstrap-table-zh-CN.js"></script>
注意：最后一個是一些提醒文字麸恍，如果有引用這個js則會以中文提示灵巧，如果沒有則以英文提示。
4、基本用法：
html里：
<table id="table"></table>
js里：
$('#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: '$1' }, { id: 2, name: 'Item 2', price: '$2' }] });
這個data也可以換成url：
$('#table').bootstrapTable({ url: 'data1.json', columns: [{ field: 'id', title: 'Item ID' }, { field: 'name', title: 'Item Name' }, { field: 'price', title: 'Item Price' }, ]});
注意：url和data的區(qū)別是：url是異步請求遠程數據刻肄；data是直接把數據賦值給他瓤球。在主表和子表都一樣可以這樣使用。
5敏弃、引入fonts：
一些圖標需要用到bootstrap里面的文件冰垄，要從下載的bootstrap包里面拷貝過來放到對應的目錄（看錯誤提醒）。
但是只放進去是訪問不了的权她，因為他不是普通的文件虹茶，所以要設置。
進入iis管理器隅要，找到“MIME類型”蝴罪，雙擊進去，在右邊菜單點擊“添加”步清，分別添加以下類型：
.woffapplication/x-font-woff .woff2 application/x-font-woff
再刷新頁面就可以加載fonts里面這些文件了要门。
6、定制組件
(function () { function init(table,url,params,titles,hasCheckbox,toolbar) { $(table).bootstrapTable({ url: url, //請求后臺的URL（*） method: 'post', //請求方式（*） toolbar: toolbar, //工具按鈕用哪個容器 striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存廓啊，默認為true欢搜，所以一般情況下需要設置一下這個屬性（*） pagination: true, //是否顯示分頁（*） sortable: false, //是否啟用排序 sortOrder: "asc", //排序方式 queryParams: queryParams, //傳遞參數（*），這里應該返回一個object谴轮，即形如{param1:val1,param2:val2} sidePagination: "server", //分頁方式：client客戶端分頁炒瘟，server服務端分頁（*） pageNumber:1, //初始化加載第一頁，默認第一頁 pageSize: 20, //每頁的記錄行數（*） pageList: [20, 50, 100], //可供選擇的每頁的行數（*） search: true, //是否顯示表格搜索第步，此搜索是客戶端搜索疮装，不會進服務端，所以粘都，個人感覺意義不大 strictSearch: true, showColumns: true, //是否顯示所有的列 showRefresh: true, //是否顯示刷新按鈕 minimumCountColumns: 2, //最少允許的列數 clickToSelect: true, //是否啟用點擊選中行 //height: 500, //行高廓推，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度 uniqueId: "ID", //每一行的唯一標識翩隧，一般為主鍵列 showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕 cardView: false, //是否顯示詳細視圖 detailView: false, //是否顯示父子表 columns: createCols(params,titles,hasCheckbox), data: [{ id: 1, name: 'Item 1', price: '$1' }, { id: 2, name: 'Item 2', price: '$2' }] }); } function createCols(params,titles,hasCheckbox) { if(params.length!=titles.length) return null; var arr = []; if(hasCheckbox) { var objc = {}; objc.checkbox = true; arr.push(objc); } for(var i = 0;i<params.length;i++) { var obj = {}; obj.field = params[i]; obj.title = titles[i]; arr.push(obj); } return arr; } //可發(fā)送給服務端的參數：limit->pageSize,offset->pageNumber,search->searchText,sort->sortName(字段),order->sortOrder('asc'或'desc') function queryParams(params) { return { //這里的鍵的名字和控制器的變量名必須一直樊展，這邊改動，控制器也需要改成一樣的 limit: params.limit, //頁面大小 offset: params.offset //頁碼 //name: $("#txt_name").val()//關鍵字查詢 }; } // 傳'#table' createBootstrapTable = function (table,url,params,titles,hasCheckbox,toolbar) { init(table,url,params,titles,hasCheckbox,toolbar); } })();
1堆生、調用：
createBootstrapTable('#table','',['id','name','price'],['Item ID','Item Name!','Item Price!'],true,'#toolbar');
2专缠、模塊：
注意，這些只要添加上一行代碼就會自動顯示的：
pagination 顯示分頁search 搜索功能showColumns 控制顯示哪些列的按鈕showRefresh 刷新按鈕showToggle 詳細視圖和列表視圖切換按鈕
但是這個不會：
toolbar
這個toolbar會關聯到我們填的一個元素顽频，但是他并不會自動創(chuàng)建所有菜單藤肢，而是我們要創(chuàng)建好菜單，他只不過把這個菜單放到合適的位置糯景，實現這些菜單的功能還需要我們自己去做嘁圈。toolbar如下：
<div id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button id="btn_edit" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除 </button> </div>
3省骂、sidePagination
這個是選擇服務端或者客戶端分頁，客戶端則填'client'最住，服務端則填'server'钞澳，他們的數據結構是不同的。
這是客戶端分頁的數據結構：
[ { "id": 0, "name": "Item 0", "price": "$0" }, { "id": 1, "name": "Item 1", "price": "$1" }, { "id": 2, "name": "Item 2", "price": "$2" }]
這是服務端分頁的數據結構：
{ "total": 200, "rows": [ { "id": 0, "name": "Item 0", "price": "$0" }, { "id": 1, "name": "Item 1", "price": "$1" }, { "id": 2, "name": "Item 2", "price": "$2" } ]}
這是因為客戶端來分頁的話涨缚，他直接根據數據總量進行判斷要分成多少頁轧粟，而服務端的話就需要返回一個total給他，因為服務端返回給的數據是一個片段脓魏，他沒辦法根據這個片段來計算多少頁兰吟。
注意：這里可以看到，服務端分頁和客戶端分頁數據結構的層次是不同的茂翔。他接受哪種數據結構混蔼，取決于是否加這個參數：
sidePagination:'server'
特別是做子表的時候，因為覺得沒有做分頁的必要珊燎，就沒了這句話惭嚣，結果就是數據過去了死活不顯示，排查很久才發(fā)現是這個問題悔政。
4晚吞、參數上傳
我們知道，當我們對table設置一個url的時候谋国，他不僅是請求這個url槽地，他還會帶一些參數上來，他到底帶來了什么參數烹卒？
我們來一個最簡單的測試一下：
$('#table').bootstrapTable({ striped: true, pagination:true, sidePagination:'server', url:'/xx/yy', columns: [{ field: 'id', title: 'Item ID' }, { field: 'name', title: 'Item Name' }, { field: 'price', title: 'Item Price' }] });
這里我們簡單的初始化了一個bootstrap-table闷盔，數據來源我們指定了url弯洗，有個參數叫method旅急，默認是'get'，也可以設為'post'牡整，如果實際上線最好設為'post'藐吮，但是這里我們就用默認的好了，可以直接在瀏覽器的控制臺看到他請求的參數逃贝。
[圖片上傳失敗...(image-4f0f9e-1534495897109)]
我們可以看到帶了一些參數上來
(1)order=asc表示排序是升序排序谣辞，這個我們可以在參數里面設置：sortOrder: "asc/desc"(兩種選一種)
(2)offset=0表示從數據從哪個row開始，簡單的說從第幾行數據開始
(3)limit=10表示選取多少個數據沐扳，也就是一頁有多少條數據
2,3跟參數pageNumber和pageSize是緊密關聯的泥从。
pageSize對應的就是limit，因此改變pageSize就改變了limit沪摄；
pageNumber結合pageSize可以算出offset躯嫉。
比如pageNumber=1,pageSize=30纱烘，那么offset=0，limit=30祈餐；
比如pageNumber=2,pageSize=30擂啥，那么offset=30，limit=30帆阳。
他不傳第幾頁上來哺壶，而是傳從第幾行開始，選取多少行蜒谤，這樣一個數據山宾。
注意：pageNumber從1開始而非從0開始，但是offset是從0開始的鳍徽。
如果我嘗試設置pageNumber:0,pageSize:30我們會發(fā)現offset=-30,limit=30塌碌，這是不對的。
5旬盯、參數的查看台妆、修改
那么我們可以直接查看這些參數以及修改嗎？答案是可以的胖翰。
有個原始參數就是用來配置這個：
queryParams:testQParams
創(chuàng)建函數：
function testQParams(params) { alert('params.limit='+params.limit+' params.offset='+params.offset);//我們可以這樣查看這些要上傳的參數 }
我們當然可以修改或者添加參數：
function testQParams(params) { return { limit:params.limit, offset:params.offset, order:params.order, abc:123, def:456 } }
有幾點要注意：
1接剩、我們當然可以修改limit、offset這些參數萨咳，但是不建議在這里改懊缺，我們可以用上面這種方式還給他賦值；
2培他、雖然沒有改動他鹃两，我們也不要丟了，如果在這里沒寫參數就丟了舀凛，傳遞的參數會以這里的為準俊扳；
3、我們可以增加新的參數猛遍。
[圖片上傳失敗...(image-e4aa39-1534495897108)]
7馋记、顯示圖片
字段通常是一個地址，那么我們要顯示圖片應該使用formatter：
{ field: 'thumb_img', title: '主圖', align: 'center', formatter:function (value,row,index) { return '<img src='+value+' width=50 class="img-rounded" >'; } }
可以直接定義寬度懊烤，圖片會自動進行縮放梯醒。
8、行內編輯功能
<1>bootstrap-editable
需要一個bootstrap插件叫做bootstrap-editable腌紧，現在改名叫做x-editable了茸习，可以適用不同的框架。
地址：https://github.com/vitalets/x-editable
下載下來之后壁肋，找到dist/bootstrap3-editable里面的3個文件夾css,js,img都拷貝到我們的網站目錄下号胚。
<2>bootstrap-table-editable
這是一個bootstrap-table的插件（插件的插件）代箭，這個插件呢就在我們下載的bootstrap-table包里，路徑是dist/extensions/editable
把他拷到我們的對應目錄下即可
<3>引入
<link href="<?php echo '/static/bootstrap/extensions/editable/css/bootstrap-editable.css'; ?>" rel="stylesheet"><script src="<?php echo '/static/bootstrap/extensions/editable/js/bootstrap-editable.js'; ?>"></script><script src="<?php echo '/static/bootstrap-table/extensions/editable/bootstrap-table-editable.js'; ?>"></script>
注意他們跟jquery涕刚、bootstrap嗡综、bootstrap-table的依賴關系，所以要放在他們的后面杜漠。
<4>使用1：
在列定義里面加上editable:true极景，比如：
field:'addr', title:'地址', editable:true,
就會變成可編輯狀態(tài)了
<5>使用2：
編輯完成我們要添加一個回調
在bootstrapTable頂級的屬性定義里面，添加一個回調函數：
onEditableSave:function (field,row,oldValue,$el) { //alert('保存addr='+row.addr+' id='+row.itemid); }
這里我們可以看到當編輯完保存的時候就會調用到這個函數驾茴，在row里面有所有當前行的信息盼樟，那么我們可以通過把這個信息用ajax傳遞到服務器保存起來。
編輯功能完成锈至。
<6>保存驗證+ajax保存確認+取消保存
我們在實際開發(fā)當中晨缴，經常需要這樣的功能：
(1)驗證用戶的輸入是否正確；
(2)如果用戶輸入不正確峡捡，就不要在頁面上顯示了击碗，直接顯示保存不了；
(3)如果用戶輸入正確们拙，通過ajax請求保存到后臺稍途；
(4)如果保存到后臺失敗，應該返回前端失敗的消息砚婆，前端的內容回退到保存前的狀態(tài)械拍；
(5)如果保存成功，前端也做相應的顯示樣式調整及狀態(tài)確定装盯。
在上面“使用1”及“使用2”當中坷虑，當點擊保存的時候，在save函數里驗證不起作用埂奈，你再驗證他也保存進去了迄损。所以驗證另有地方。
應該這樣做：
(1)把editable:true改為：
validate:function (value) { value = $.trim(value); if (!value) { return '必須填入一個網址挥转，不能放空海蔽！'; } if (!checkUrl(value)) { return '輸入的不是一個合法的網址！'; } }
另外绑谣，在這個函數里，要取的row數據可以這樣：
var data = $('#table').bootstrapTable('getData'); var index = $(this).parents('tr').data('index'); console.log(data[index]);
這是因為這個$(this)可以指向這個當前單元格
這樣輸入就有驗證功能拗引，return一個字符串他會自動不保存進去借宵，而顯示這個字符串的提示。
注意矾削，驗證的保存規(guī)則：
如果return ''; 則會保存空字符串壤玫；
如果return 'xxx'; 則不會保存這個字符串豁护，而是作為提示顯示出來；
如果不return欲间，則按照原value保存楚里。
(2)把onEditableSave改為：
onEditableSave:function (field,row,oldValue,$el) { // 測試證明oldValue取到的是undefined $.post('xxx/yyy') .done(function (result) { //在這里解析result if(保存成功) { // 頁面提示保存成功 }else { // 頁面提示保存失敗 // buy_addr_bak這個字段是從服務端傳過來與buy_addr等值的一個字段，就是為了在必要的時候恢復數據 $el.text(row.buy_addr_bak); } // 不管保存成功還是失敗猎贴，已經不是編輯狀態(tài)班缎，把加粗去掉 $el.removeClass('editable-unsaved'); }); }
另外，在這個函數里她渴，如果要取到row數據可以這樣（雖然這里沒有必要达址，參數里已經有了）：
var data = $('#table').bootstrapTable('getData'); var index = $el.parent().parents('tr').data('index');//注意這里一個是parent,一個是parents console.log(data[index]);
9、自動換行
在給table加上樣式：
style="word-break:break-all; word-wrap:break-all;"
10趁耗、父子表
功能：點擊行首的加號沉唠，下拉展開一個子表
<1>在父表的屬性里添加
detailView:true
<2>添加回調函數
onExpandRow:function (index,row,$detail) { initSubTable(index,row,$detail); }
當點擊行首的加號，將會觸發(fā)這個回調函數苛败，這個回調函數會再去調用執(zhí)行函數满葛。
<3>執(zhí)行函數
function initSubTable(index,row,$detail) { var parentid = row.MENU_ID; var cur_table = $detail.html('<table></table>').find('table');//注意這個'table'不是一個id，他在任何情況下不需要改變 $(cur_table).bootstrapTable({ url:'', method:'post', queryParams:{strParentID:parentid}, ajaxOptions:{strParentID:parentid}, clickToSelect:true, detailView:true, uniqueId:"MENU_ID", pageSize:10, pageList:[10,25], columns:[ { filed:'from', title:'from' }, { field:'url', title:'url' }, { field:'to', title:'to' } ], onExpandRow:function (index,row,$Subdetail) { initSubTable(index,row,$Subdetail); } }); }
注意罢屈，這里做了一個遞歸纱扭，即子表里面還可以展開孫表，我們也可以不需要儡遮，去掉就可以了乳蛾。
11、刷新功能
$('#table_search').bootstrapTable( "refresh", { url:"/japp/autobuy/ajaxorder/search" } );
