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的區別是：url是非同步請求遠端資料；data是直接把資料賦值給他。在主表和子表都一樣可以這樣使用。

5、引入fonts：

一些圖示需要用到bootstrap裡面的檔案，要從下載的bootstrap包裡面拷貝過來放到對應的目錄（看錯誤提醒）。

但是隻放進去是訪問不了的，因為他不是普通的檔案，所以要設定。

進入iis管理器，找到“MIME型別”，雙擊進去，在右邊選單點選“新增”，分別新增以下型別：

.woff
application/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;
    }
    //可傳送給服務端的引數：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會關聯到我們填的一個元素，但是他並不會自動建立所有選單，而是我們要建立好選單，他只不過把這個選單放到合適的位置，實現這些選單的功能還需要我們自己去做。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'

特別是做子表的時候，因為覺得沒有做分頁的必要，就沒了這句話，結果就是資料過去了死活不顯示，排查很久才發現是這個問題。

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'，但是這裡我們就用預設的好了，可以直接在瀏覽器的控制檯看到他請求的引數。

我們可以看到帶了一些引數上來

(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，這是不對的。

5、引數的檢視、修改

那麼我們可以直接檢視這些引數以及修改嗎？答案是可以的。

有個原始引數就是用來配置這個：

queryParams:testQParams

建立函式：

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、我們可以增加新的引數。

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,

就會變成可編輯狀態了

<5>使用2：

編輯完成我們要新增一個回撥

在bootstrapTable頂級的屬性定義裡面，新增一個回撥函式：

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

這裡我們可以看到當編輯完儲存的時候就會呼叫到這個函式，在row裡面有所有當前行的資訊，那麼我們可以通過把這個資訊用ajax傳遞到伺服器儲存起來。

編輯功能完成。

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

我們在實際開發當中，經常需要這樣的功能：

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

(2)如果使用者輸入不正確，就不要在頁面上顯示了，直接顯示儲存不了；

(3)如果使用者輸入正確，通過ajax請求儲存到後臺；

(4)如果儲存到後臺失敗，應該返回前端失敗的訊息，前端的內容回退到儲存前的狀態；

(5)如果儲存成功，前端也做相應的顯示樣式調整及狀態確定。

在上面“使用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一個字串他會自動不儲存進去，而顯示這個字串的提示。

注意，驗證的儲存規則：

如果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);
                            }
                            // 不管儲存成功還是失敗，已經不是編輯狀態，把加粗去掉
                            $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);
                }

當點選行首的加號，將會觸發這個回撥函式，這個回撥函式會再去呼叫執行函式。

<3>執行函式

        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"
                    }
                );

參考文章：

http://www.cnblogs.com/landeanfen/p/4976838.html