bootstrap-table使用總結

時間 2019-11-07

原文原文鏈接

一、下載：

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

二、文檔：

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

三、引用：

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

四、基本用法：

<table id="table"></table>

js裏：html

 1 $('#table').bootstrapTable({  
 2     columns: [{  
 3         field: 'id',  
 4         title: 'Item ID'  
 5     }, {  
 6         field: 'name',  
 7         title: 'Item Name'  
 8     }, {  
 9         field: 'price',  
10         title: 'Item Price'  
11     }],  
12     data: [{  
13         id: 1,  
14         name: 'Item 1',  
15         price: '$1'  
16     }, {  
17         id: 2,  
18         name: 'Item 2',  
19         price: '$2'  
20     }]  
21 });

這個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的區別是：url是異步請求遠程數據；data是直接把數據賦值給他。在主表和子表都同樣能夠這樣使用。jquery

五、引入fonts：

一些圖標須要用到bootstrap裏面的文件，要從下載的bootstrap包裏面拷貝過來放到對應的目錄（看錯誤提醒）。git

可是隻放進去是訪問不了的，由於他不是普通的文件，因此要設置。github

進入iis管理器，找到「MIME類型」，雙擊進去，在右邊菜單點擊「添加」，分別添加如下類型：ajax

1 .woff  
2 application/x-font-woff  
3   
4 .woff2            
5 application/x-font-woff

再刷新頁面就能夠加載fonts裏面這些文件了。json

六、定製組件

 1 (function () {  
 2     function init(table,url,params,titles,hasCheckbox,toolbar) {  
 3         $(table).bootstrapTable({  
 4             url: url,                           //請求後臺的URL（*）  
 5             method: 'post',                     //請求方式（*）  
 6             toolbar: toolbar,                   //工具按鈕用哪一個容器  
 7             striped: true,                      //是否顯示行間隔色  
 8             cache: false,                       //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）  
               idField: "ProductId",               //標識哪一個字段爲id主鍵 
 9             pagination: true,                   //是否顯示分頁（*）  
10             sortable: false,                    //是否啓用排序  
11             sortOrder: "asc",                   //排序方式  
12             queryParams: queryParams,           //傳遞參數（*），這裏應該返回一個object，即形如{param1:val1,param2:val2}  
13             sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）  
14             pageNumber:1,                       //初始化加載第一頁，默認第一頁  
15             pageSize: 20,                       //每頁的記錄行數（*）  
16             pageList: [20, 50, 100],            //可供選擇的每頁的行數（*）  
17             search: true,                       //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，因此，我的感受意義不大  
18             strictSearch: true,  
19             showColumns: true,                  //是否顯示全部的列  
20             showRefresh: true,                  //是否顯示刷新按鈕  
21             minimumCountColumns: 2,             //最少容許的列數  
22             clickToSelect: true,                //是否啓用點擊選中行  
23             //height: 500,                      //行高，若是沒有設置height屬性，表格自動根據記錄條數以爲表格高度  
24             uniqueId: "ID",                     //每一行的惟一標識，通常爲主鍵列  
               showToggle: false,   //名片格式
  
               cardView: false,//設置爲True時顯示名片（card）佈局



25             showToggle:true,                    //是否顯示詳細視圖和列表視圖的切換按鈕  
26             cardView: false,                    //是否顯示詳細視圖  
27             detailView: false,                  //是否顯示父子表

formatLoadingMessage: function () {
return "請稍等，正在加載中...";
},
formatNoMatches: function () { //沒有匹配的結果
return '無符合條件的記錄';
},bootstrap

onLoadError: function (data) {

$('#reportTable').bootstrapTable('removeAll');

onClickRow: function (row) {

window.location.href = "/qStock/qProInfo/" + row.ProductId;

28   
29             columns: createCols(params,titles,hasCheckbox),  
30             data: [{  
31                 id: 1,  
32                 name: 'Item 1',  
33                 price: '$1'  
34             }, {  
35                 id: 2,  
36                 name: 'Item 2',  
37                 price: '$2'  
38             }]  
39         });  
40     }  
41     function createCols(params,titles,hasCheckbox) {  
42         if(params.length!=titles.length)  
43             return null;  
44         var arr = [];  
45         if(hasCheckbox)  
46         {  
47             var objc = {};  
48             objc.checkbox = true;  
49             arr.push(objc);  
50         }  
51         for(var i = 0;i<params.length;i++)  
52         {  
53             var obj = {};  
54             obj.field = params[i];  
55             obj.title = titles[i];  
56             arr.push(obj);  
57         }  
58         return arr;  
59     }  
60     //可發送給服務端的參數：limit->pageSize,offset->pageNumber,search->searchText,sort->sortName(字段),order->sortOrder('asc'或'desc')  
61     function queryParams(params) {  
62         return {   //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也須要改爲同樣的  
63             limit: params.limit,   //頁面大小  
64             offset: params.offset  //頁碼  
65             //name: $("#txt_name").val()//關鍵字查詢  
66         };  
67     }  
68     // 傳'#table'  
69     createBootstrapTable = function (table,url,params,titles,hasCheckbox,toolbar) {  
70         init(table,url,params,titles,hasCheckbox,toolbar);  
71     }  
72   
73 })();

一、調用：

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

二、模塊：

注意，這些只要添加上一行代碼就會自動顯示的：

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

可是這個不會：

toolbar

這個toolbar會關聯到咱們填的一個元素，可是他並不會自動建立全部菜單，而是咱們要建立好菜單，他只不過把這個菜單放到合適的位置，實現這些菜單的功能還須要咱們本身去作。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>

三、sidePagination

這個是選擇服務端或者客戶端分頁，客戶端則填'client'，服務端則填'server'，他們的數據結構是不一樣的。

這是客戶端分頁的數據結構：

 1 [  
 2     {  
 3         "id": 0,  
 4         "name": "Item 0",  
 5         "price": "$0"  
 6     },  
 7     {  
 8         "id": 1,  
 9         "name": "Item 1",  
10         "price": "$1"  
11     },  
12     {  
13         "id": 2,  
14         "name": "Item 2",  
15         "price": "$2"  
16     }  
17 ]

這是服務端分頁的數據結構：

 1 {  
 2     "total": 200,  
 3     "rows": [  
 4         {  
 5             "id": 0,  
 6             "name": "Item 0",  
 7             "price": "$0"  
 8         },  
 9         {  
10             "id": 1,  
11             "name": "Item 1",  
12             "price": "$1"  
13         },  
14         {  
15             "id": 2,  
16             "name": "Item 2",  
17             "price": "$2"  
18         }  
19     ]  
20 }

這是由於客戶端來分頁的話，他直接根據數據總量進行判斷要分紅多少頁，而服務端的話就須要返回一個total給他，由於服務端返回給的數據是一個片斷，他沒辦法根據這個片斷來計算多少頁。

注意：這裏能夠看到，服務端分頁和客戶端分頁數據結構的層次是不一樣的。他接受哪一種數據結構，取決因而否加這個參數：
```
sidePagination:'server'  
```
特別是作子表的時候，由於以爲沒有作分頁的必要，就沒了這句話，結果就是數據過去了死活不顯示，排查好久才發現是這個問題。

四、參數上傳

咱們知道，當咱們對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'，可是這裏咱們就用默認的好了，能夠直接在瀏覽器的控制檯看到他請求的參數。

咱們能夠看到帶了一些參數上來

(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咱們會發現offset=-30,limit=30，這是不對的。

五、參數的查看、修改

那麼咱們能夠直接查看這些參數以及修改嗎？答案是能夠的。

有個原始參數就是用來配置這個:

queryParams:testQParams

建立函數：

function testQParams(params) {  
            alert('params.limit='+params.limit+' params.offset='+params.offset);//咱們能夠這樣查看這些要上傳的參數  
        }

咱們固然能夠修改或者添加參數：

1 function testQParams(params) {  
2     return {  
3         limit:params.limit,  
4         offset:params.offset,  
5         order:params.order,  
6         abc:123,  
7         def:456  
8     }  
9 }

有幾點要注意：

一、咱們固然能夠修改limit、offset這些參數，可是不建議在這裏改，咱們能夠用上面這種方式還給他賦值；

二、雖然沒有改動他，咱們也不要丟了，若是在這裏沒寫參數就丟了，傳遞的參數會以這裏的爲準；

三、咱們能夠增長新的參數。

七、顯示圖片

字段一般是一個地址，那麼咱們要顯示圖片應該使用formatter：

1 {  
2                 field: 'thumb_img',  
3                 title: '主圖',  
4                 align: 'center',  
5                 formatter:function (value,row,index) {  
6                     return '<img  src='+value+' width=50 class="img-rounded" >';  
7                 }  
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>引入

1 <link href="<?php echo '/static/bootstrap/extensions/editable/css/bootstrap-editable.css'; ?>" rel="stylesheet">  
2 <script src="<?php echo '/static/bootstrap/extensions/editable/js/bootstrap-editable.js'; ?>"></script>  
3 <script src="<?php echo '/static/bootstrap-table/extensions/editable/bootstrap-table-editable.js'; ?>"></script>

注意他們跟jquery、bootstrap、bootstrap-table的依賴關係，因此要放在他們的後面。

<4>使用1：

在列定義裏面加上editable:true，好比：

1 field:'addr',  
2 title:'地址',  
3 editable:true,

就會變成可編輯狀態了

<5>使用2：

編輯完成咱們要添加一個回調

在bootstrapTable頂級的屬性定義裏面，添加一個回調函數：

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

這裏咱們能夠看到當編輯完保存的時候就會調用到這個函數，在row裏面有全部當前行的信息，那麼咱們能夠經過把這個信息用ajax傳遞到服務器保存起來。

編輯功能完成。

<6>保存驗證+ajax保存確認+取消保存

咱們在實際開發當中，常常須要這樣的功能：

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

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

(3)若是用戶輸入正確，經過ajax請求保存到後臺；

(4)若是保存到後臺失敗，應該返回前端失敗的消息，前端的內容回退到保存前的狀態；

(5)若是保存成功，前端也作相應的顯示樣式調整及狀態肯定。

在上面「使用1」及「使用2」當中，當點擊保存的時候，在save函數裏驗證不起做用，你再驗證他也保存進去了。因此驗證另有地方。

應該這樣作：

(1)把editable:true改成：

 1 validate:function (value) {  
 2     value = $.trim(value);  
 3     if (!value)  
 4     {  
 5         return '必須填入一個網址，不能放空！';  
 6     }  
 7     if (!checkUrl(value))  
 8     {  
 9         return '輸入的不是一個合法的網址！';  
10     }  
11

另外，在這個函數裏，要取的row數據能夠這樣：

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

這是由於這個$(this)能夠指向這個當前單元格

這樣輸入就有驗證功能，return一個字符串他會自動不保存進去，而顯示這個字符串的提示。

注意，驗證的保存規則：

若是return ''; 則會保存空字符串；

若是return 'xxx'; 則不會保存這個字符串，而是做爲提示顯示出來；

若是不return，則按照原value保存。

(2)把onEditableSave改成：

 1 onEditableSave:function (field,row,oldValue,$el) {  
 2     // 測試證實oldValue取到的是undefined  
 3     $.post('xxx/yyy')  
 4         .done(function (result) {  
 5             //在這裏解析result  
 6             if(保存成功)  
 7             {  
 8                 // 頁面提示保存成功  
 9             }else  
10             {  
11                 // 頁面提示保存失敗  
12                 // buy_addr_bak這個字段是從服務端傳過來與buy_addr等值的一個字段，就是爲了在必要的時候恢復數據  
13                 $el.text(row.buy_addr_bak);  
14             }  
15             // 無論保存成功仍是失敗，已經不是編輯狀態，把加粗去掉  
16             $el.removeClass('editable-unsaved');  
17         });  
18 }

另外，在這個函數裏，若是要取到row數據能夠這樣（雖然這裏沒有必要，參數裏已經有了）：

1 var data = $('#table').bootstrapTable('getData');  
2 var index = $el.parent().parents('tr').data('index');//注意這裏一個是parent,一個是parents  
3 console.log(data[index]);

九、自動換行

在給table加上樣式：

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

十、父子表

功能：點擊行首的加號，下拉展開一個子表

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

1 detailView:true

<2>添加回調函數

1 onExpandRow:function (index,row,$detail) {  
2     initSubTable(index,row,$detail);  
3 }

當點擊行首的加號，將會觸發這個回調函數，這個回調函數會再去調用執行函數。

<3>執行函數

 1 function initSubTable(index,row,$detail) {  
 2     var parentid = row.MENU_ID;  
 3     var cur_table = $detail.html('<table></table>').find('table');//注意這個'table'不是一個id，他在任何狀況下不須要改變  
 4     $(cur_table).bootstrapTable({  
 5         url:'',  
 6         method:'post',  
 7         queryParams:{strParentID:parentid},  
 8         ajaxOptions:{strParentID:parentid},  
 9         clickToSelect:true,  
10         detailView:true,  
11         uniqueId:"MENU_ID",  
12         pageSize:10,  
13         pageList:[10,25],  
14         columns:[  
15             {  
16                 filed:'from',  
17                 title:'from'  
18             },  
19             {  
20                 field:'url',  
21                 title:'url'  
22             },  
23             {  
24                 field:'to',  
25                 title:'to'  
26             }  
27         ],  
28         onExpandRow:function (index,row,$Subdetail) {  
29             initSubTable(index,row,$Subdetail);  
30         }  
31     });  
32 }