本篇文章就給大家介紹帶來(lái)BootStrap之bootstrap-table使用總結(jié)?。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你們有所幫助。如果大家想要學(xué)習(xí)和獲取更多的bootstrap相關(guān)視頻教程也可以訪問(wèn)：bootstrap教程！

一、下載：

https://github.com/wenzhixin/bootstrap-table

二、文檔：

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

三、引用：

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

注意：最后一個(gè)是一些提醒文字，如果有引用這個(gè)js則會(huì)以中文提示，如果沒(méi)有則以英文提示。

四、基本用法：

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'
????????????}]
????????});

這個(gè)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是異步請(qǐng)求遠(yuǎn)程數(shù)據(jù)；data是直接把數(shù)據(jù)賦值給他。在主表和子表都一樣可以這樣使用。

五、引入fonts：

一些圖標(biāo)需要用到bootstrap里面的文件，要從下載的bootstrap包里面拷貝過(guò)來(lái)放到對(duì)應(yīng)的目錄（看錯(cuò)誤提醒）。

但是只放進(jìn)去是訪問(wèn)不了的，因?yàn)樗皇瞧胀ǖ奈募?，所以要設(shè)置。

進(jìn)入iis管理器，找到“MIME類(lèi)型”，雙擊進(jìn)去，在右邊菜單點(diǎn)擊“添加”，分別添加以下類(lèi)型：

.woff
application/x-font-woff

.woff2??????????
application/x-font-woff

再刷新頁(yè)面就可以加載fonts里面這些文件了。

六、定制組件

(function?()?{
????function?init(table,url,params,titles,hasCheckbox,toolbar)?{
????????$(table).bootstrapTable({
????????????url:?url,???????????????????????????//請(qǐng)求后臺(tái)的URL（*）
????????????method:?'post',?????????????????????//請(qǐng)求方式（*）
????????????toolbar:?toolbar,???????????????????//工具按鈕用哪個(gè)容器
????????????striped:?true,??????????????????????//是否顯示行間隔色
????????????cache:?false,???????????????????????//是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
????????????pagination:?true,???????????????????//是否顯示分頁(yè)（*）
????????????sortable:?false,????????????????????//是否啟用排序
????????????sortOrder:?"asc",???????????????????//排序方式
????????????queryParams:?queryParams,???????????//傳遞參數(shù)（*），這里應(yīng)該返回一個(gè)object，即形如{param1:val1,param2:val2}
????????????sidePagination:?"server",???????????//分頁(yè)方式：client客戶端分頁(yè)，server服務(wù)端分頁(yè)（*）
????????????pageNumber:1,???????????????????????//初始化加載第一頁(yè)，默認(rèn)第一頁(yè)
????????????pageSize:?20,???????????????????????//每頁(yè)的記錄行數(shù)（*）
????????????pageList:?[20,?50,?100],????????????//可供選擇的每頁(yè)的行數(shù)（*）
????????????search:?true,???????????????????????//是否顯示表格搜索，此搜索是客戶端搜索，不會(huì)進(jìn)服務(wù)端，所以，個(gè)人感覺(jué)意義不大
????????????strictSearch:?true,
????????????showColumns:?true,??????????????????//是否顯示所有的列
????????????showRefresh:?true,??????????????????//是否顯示刷新按鈕
????????????minimumCountColumns:?2,?????????????//最少允許的列數(shù)
????????????clickToSelect:?true,????????????????//是否啟用點(diǎn)擊選中行
????????????//height:?500,??????????????????????//行高，如果沒(méi)有設(shè)置height屬性，表格自動(dòng)根據(jù)記錄條數(shù)覺(jué)得表格高度
????????????uniqueId:?"ID",?????????????????????//每一行的唯一標(biāo)識(shí)，一般為主鍵列
????????????showToggle:true,????????????????????//是否顯示詳細(xì)視圖和列表視圖的切換按鈕
????????????cardView:?false,????????????????????//是否顯示詳細(xì)視圖
????????????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ā)送給服務(wù)端的參數(shù)：limit->pageSize,offset->pageNumber,search->searchText,sort->sortName(字段),order->sortOrder('asc'或'desc')
????function?queryParams(params)?{
????????return?{???//這里的鍵的名字和控制器的變量名必須一直，這邊改動(dòng)，控制器也需要改成一樣的
????????????limit:?params.limit,???//頁(yè)面大小
????????????offset:?params.offset??//頁(yè)碼
????????????//name:?$("#txt_name").val()//關(guān)鍵字查詢
????????};
????}
????//?傳'#table'
????createBootstrapTable?=?function?(table,url,params,titles,hasCheckbox,toolbar)?{
????????init(table,url,params,titles,hasCheckbox,toolbar);
????}

})();

1、調(diào)用：

createBootstrapTable('#table','',['id','name','price'],['Item?ID','Item?Name!','Item?Price!'],true,'#toolbar');

2、模塊：

注意，這些只要添加上一行代碼就會(huì)自動(dòng)顯示的：

pagination?顯示分頁(yè)
search?????搜索功能
showColumns??控制顯示哪些列的按鈕
showRefresh??刷新按鈕
showToggle???詳細(xì)視圖和列表視圖切換按鈕

但是這個(gè)不會(huì)：

toolbar

這個(gè)toolbar會(huì)關(guān)聯(lián)到我們填的一個(gè)元素，但是他并不會(huì)自動(dòng)創(chuàng)建所有菜單，而是我們要?jiǎng)?chuàng)建好菜單，他只不過(guò)把這個(gè)菜單放到合適的位置，實(shí)現(xiàn)這些菜單的功能還需要我們自己去做。toolbar如下：

????<p 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>
????</p>

3、sidePagination

這個(gè)是選擇服務(wù)端或者客戶端分頁(yè)，客戶端則填'client'，服務(wù)端則填'server'，他們的數(shù)據(jù)結(jié)構(gòu)是不同的。

這是客戶端分頁(yè)的數(shù)據(jù)結(jié)構(gòu)：

[
????{
????????"id":?0,
????????"name":?"Item?0",
????????"price":?"$0"
????},
????{
????????"id":?1,
????????"name":?"Item?1",
????????"price":?"$1"
????},
????{
????????"id":?2,
????????"name":?"Item?2",
????????"price":?"$2"
????}
]

這是服務(wù)端分頁(yè)的數(shù)據(jù)結(jié)構(gòu)：

{
????"total":?200,
????"rows":?[
????????{
????????????"id":?0,
????????????"name":?"Item?0",
????????????"price":?"$0"
????????},
????????{
????????????"id":?1,
????????????"name":?"Item?1",
????????????"price":?"$1"
????????},
????????{
????????????"id":?2,
????????????"name":?"Item?2",
????????????"price":?"$2"
????????}
????]
}

這是因?yàn)榭蛻舳藖?lái)分頁(yè)的話，他直接根據(jù)數(shù)據(jù)總量進(jìn)行判斷要分成多少頁(yè)，而服務(wù)端的話就需要返回一個(gè)total給他，因?yàn)榉?wù)端返回給的數(shù)據(jù)是一個(gè)片段，他沒(méi)辦法根據(jù)這個(gè)片段來(lái)計(jì)算多少頁(yè)。

注意：這里可以看到，服務(wù)端分頁(yè)和客戶端分頁(yè)數(shù)據(jù)結(jié)構(gòu)的層次是不同的。他接受哪種數(shù)據(jù)結(jié)構(gòu)，取決于是否加這個(gè)參數(shù)：

sidePagination:'server'

特別是做子表的時(shí)候，因?yàn)橛X(jué)得沒(méi)有做分頁(yè)的必要，就沒(méi)了這句話，結(jié)果就是數(shù)據(jù)過(guò)去了死活不顯示，排查很久才發(fā)現(xiàn)是這個(gè)問(wèn)題。

4、參數(shù)上傳

我們知道，當(dāng)我們對(duì)table設(shè)置一個(gè)url的時(shí)候，他不僅是請(qǐng)求這個(gè)url，他還會(huì)帶一些參數(shù)上來(lái)，他到底帶來(lái)了什么參數(shù)？

我們來(lái)一個(gè)最簡(jiǎn)單的測(cè)試一下：

????????$('#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'
????????????}]
????????});

這里我們簡(jiǎn)單的初始化了一個(gè)bootstrap-table，數(shù)據(jù)來(lái)源我們指定了url，有個(gè)參數(shù)叫method，默認(rèn)是'get'，也可以設(shè)為'post'，如果實(shí)際上線最好設(shè)為'post'，但是這里我們就用默認(rèn)的好了，可以直接在瀏覽器的控制臺(tái)看到他請(qǐng)求的參數(shù)。

我們可以看到帶了一些參數(shù)上來(lái)

(1)order=asc表示排序是升序排序，這個(gè)我們可以在參數(shù)里面設(shè)置：sortOrder: "asc/desc"(兩種選一種)

(2)offset=0表示從數(shù)據(jù)從哪個(gè)row開(kāi)始，簡(jiǎn)單的說(shuō)從第幾行數(shù)據(jù)開(kāi)始

(3)limit=10表示選取多少個(gè)數(shù)據(jù)，也就是一頁(yè)有多少條數(shù)據(jù)

2,3跟參數(shù)pageNumber和pageSize是緊密關(guān)聯(lián)的。

pageSize對(duì)應(yīng)的就是limit，因此改變pageSize就改變了limit；

pageNumber結(jié)合pageSize可以算出offset。

比如pageNumber=1,pageSize=30，那么offset=0，limit=30；

比如pageNumber=2,pageSize=30，那么offset=30，limit=30。

他不傳第幾頁(yè)上來(lái)，而是傳從第幾行開(kāi)始，選取多少行，這樣一個(gè)數(shù)據(jù)。

注意：pageNumber從1開(kāi)始而非從0開(kāi)始，但是offset是從0開(kāi)始的。

如果我嘗試設(shè)置pageNumber:0,pageSize:30我們會(huì)發(fā)現(xiàn)offset=-30,limit=30，這是不對(duì)的。

5、參數(shù)的查看、修改

那么我們可以直接查看這些參數(shù)以及修改嗎？答案是可以的。

有個(gè)原始參數(shù)就是用來(lái)配置這個(gè)：

queryParams:testQParams

創(chuàng)建函數(shù)：

function?testQParams(params)?{
????????????alert('params.limit='+params.limit+'?params.offset='+params.offset);//我們可以這樣查看這些要上傳的參數(shù)
????????}

我們當(dāng)然可以修改或者添加參數(shù)：

????????function?testQParams(params)?{
????????????return?{
????????????????limit:params.limit,
????????????????offset:params.offset,
????????????????order:params.order,
????????????????abc:123,
????????????????def:456
????????????}
????????}

有幾點(diǎn)要注意：

1、我們當(dāng)然可以修改limit、offset這些參數(shù)，但是不建議在這里改，我們可以用上面這種方式還給他賦值；

2、雖然沒(méi)有改動(dòng)他，我們也不要丟了，如果在這里沒(méi)寫(xiě)參數(shù)就丟了，傳遞的參數(shù)會(huì)以這里的為準(zhǔn)；

3、我們可以增加新的參數(shù)。

七、顯示圖片

字段通常是一個(gè)地址，那么我們要顯示圖片應(yīng)該使用formatter：

{
????????????????field:?'thumb_img',
????????????????title:?'主圖',
????????????????align:?'center',
????????????????formatter:function?(value,row,index)?{
????????????????????return?'<img  src=&#39;+value+&#39; width=50 class="img-rounded" >';
????????????????}
????????????}

可以直接定義寬度，圖片會(huì)自動(dòng)進(jìn)行縮放。

八、行內(nèi)編輯功能

<1>bootstrap-editable

需要一個(gè)bootstrap插件叫做bootstrap-editable，現(xiàn)在改名叫做x-editable了，可以適用不同的框架。

地址：https://github.com/vitalets/x-editable

下載下來(lái)之后，找到dist/bootstrap3-editable里面的3個(gè)文件夾css,js,img都拷貝到我們的網(wǎng)站目錄下。

<2>bootstrap-table-editable

這是一個(gè)bootstrap-table的插件（插件的插件），這個(gè)插件呢就在我們下載的bootstrap-table包里，路徑是dist/extensions/editable

把他拷到我們的對(duì)應(yīng)目錄下即可

<3>引入

<link href="<?php echo &#39;/static/bootstrap/extensions/editable/css/bootstrap-editable.css&#39;; ?>"?rel="stylesheet">
<script src="<?php echo &#39;/static/bootstrap/extensions/editable/js/bootstrap-editable.js&#39;; ?>"></script>
<script src="<?php echo &#39;/static/bootstrap-table/extensions/editable/bootstrap-table-editable.js&#39;; ?>"></script>

注意他們跟jquery、bootstrap、bootstrap-table的依賴關(guān)系，所以要放在他們的后面。

<4>使用1：

在列定義里面加上editable:true，比如：

????????????????field:'addr',
????????????????title:'地址',
????????????????editable:true,

就會(huì)變成可編輯狀態(tài)了

<5>使用2：

編輯完成我們要添加一個(gè)回調(diào)

在bootstrapTable頂級(jí)的屬性定義里面，添加一個(gè)回調(diào)函數(shù)：

????????????onEditableSave:function?(field,row,oldValue,$el)?{
????????????????//alert('保存addr='+row.addr+'?id='+row.itemid);
????????????}

這里我們可以看到當(dāng)編輯完保存的時(shí)候就會(huì)調(diào)用到這個(gè)函數(shù)，在row里面有所有當(dāng)前行的信息，那么我們可以通過(guò)把這個(gè)信息用ajax傳遞到服務(wù)器保存起來(lái)。

編輯功能完成。

<6>保存驗(yàn)證+ajax保存確認(rèn)+取消保存

我們?cè)趯?shí)際開(kāi)發(fā)當(dāng)中，經(jīng)常需要這樣的功能：

(1)驗(yàn)證用戶的輸入是否正確；

(2)如果用戶輸入不正確，就不要在頁(yè)面上顯示了，直接顯示保存不了；

(3)如果用戶輸入正確，通過(guò)ajax請(qǐng)求保存到后臺(tái)；

(4)如果保存到后臺(tái)失敗，應(yīng)該返回前端失敗的消息，前端的內(nèi)容回退到保存前的狀態(tài)；

(5)如果保存成功，前端也做相應(yīng)的顯示樣式調(diào)整及狀態(tài)確定。

在上面“使用1”及“使用2”當(dāng)中，當(dāng)點(diǎn)擊保存的時(shí)候，在save函數(shù)里驗(yàn)證不起作用，你再驗(yàn)證他也保存進(jìn)去了。所以驗(yàn)證另有地方。

應(yīng)該這樣做：

(1)把editable:true改為：

????????????????????validate:function?(value)?{
????????????????????????value?=?$.trim(value);
????????????????????????if?(!value)
????????????????????????{
????????????????????????????return?'必須填入一個(gè)網(wǎng)址，不能放空！';
????????????????????????}
????????????????????????if?(!checkUrl(value))
????????????????????????{
????????????????????????????return?'輸入的不是一個(gè)合法的網(wǎng)址！';
????????????????????????}

????????????????????}

另外，在這個(gè)函數(shù)里，要取的row數(shù)據(jù)可以這樣：

????????????????????????var?data?=?$('#table').bootstrapTable('getData');
????????????????????????var?index?=?$(this).parents('tr').data('index');
????????????????????????console.log(data[index]);

這是因?yàn)檫@個(gè)$(this)可以指向這個(gè)當(dāng)前單元格

這樣輸入就有驗(yàn)證功能，return一個(gè)字符串他會(huì)自動(dòng)不保存進(jìn)去，而顯示這個(gè)字符串的提示。

注意，驗(yàn)證的保存規(guī)則：

如果return ''; ?則會(huì)保存空字符串；

如果return 'xxx'; ?則不會(huì)保存這個(gè)字符串，而是作為提示顯示出來(lái)；

如果不return，則按照原value保存。

(2)把onEditableSave改為：

????????????????onEditableSave:function?(field,row,oldValue,$el)?{
????????????????????//?測(cè)試證明oldValue取到的是undefined
????????????????????$.post('xxx/yyy')
????????????????????????.done(function?(result)?{
????????????????????????????//在這里解析result
????????????????????????????if(保存成功)
????????????????????????????{
????????????????????????????????//?頁(yè)面提示保存成功
????????????????????????????}else
????????????????????????????{
????????????????????????????????//?頁(yè)面提示保存失敗
????????????????????????????????//?buy_addr_bak這個(gè)字段是從服務(wù)端傳過(guò)來(lái)與buy_addr等值的一個(gè)字段，就是為了在必要的時(shí)候恢復(fù)數(shù)據(jù)
????????????????????????????????$el.text(row.buy_addr_bak);
????????????????????????????}
????????????????????????????//?不管保存成功還是失敗，已經(jīng)不是編輯狀態(tài)，把加粗去掉
????????????????????????????$el.removeClass('editable-unsaved');
????????????????????????});
????????????????}

另外，在這個(gè)函數(shù)里，如果要取到row數(shù)據(jù)可以這樣（雖然這里沒(méi)有必要，參數(shù)里已經(jīng)有了）：

????????????????var?data?=?$('#table').bootstrapTable('getData');
????????????????var?index?=?$el.parent().parents('tr').data('index');//注意這里一個(gè)是parent,一個(gè)是parents
????????????????console.log(data[index]);

九、自動(dòng)換行

在給table加上樣式：

style="word-break:break-all;?word-wrap:break-all;"

十、父子表

功能：點(diǎn)擊行首的加號(hào)，下拉展開(kāi)一個(gè)子表

<1>在父表的屬性里添加

detailView:true

<2>添加回調(diào)函數(shù)

????????????????onExpandRow:function?(index,row,$detail)?{
????????????????????initSubTable(index,row,$detail);
????????????????}

當(dāng)點(diǎn)擊行首的加號(hào)，將會(huì)觸發(fā)這個(gè)回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)會(huì)再去調(diào)用執(zhí)行函數(shù)。

<3>執(zhí)行函數(shù)

????????function?initSubTable(index,row,$detail)?{
????????????var?parentid?=?row.MENU_ID;
????????????var?cur_table?=?$detail.html('<table></table>').find('table');//注意這個(gè)'table'不是一個(gè)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);
????????????????}
????????????});
????????}

注意，這里做了一個(gè)遞歸，即子表里面還可以展開(kāi)孫表，我們也可以不需要，去掉就可以了。

十一、刷新功能

$('#table_search').bootstrapTable(
????????????????????"refresh",
????????????????????{
????????????????????????url:"/japp/autobuy/ajaxorder/search"
????????????????????}
????????????????);

總結(jié)：以上就是本篇文的全部?jī)?nèi)容，希望能對(duì)大家的學(xué)習(xí)有所幫助。

The above is the detailed content of Summary of the use of bootstrap-table in BootStrap. For more information, please follow other related articles on the PHP Chinese website!