一、項目說明

　　①此項目是ASP.NET項目，開發語言是C#

　　②bootstrap-table使用需要下載對應的css和js插件

　　③具體詳情還需查看api文檔

二、前端代碼

1 <div class="table-responsive">
2         <table id="table" class="text-nowrap"> </table>
3     </div>

【說明】 ①text-nowrap設置表格超出不換行而顯示滾動條，避免表格列過多

 　　　　②table-responsive：有table-responsive，表格有滾動條沒有table-responsive，網頁有滾動條

$('#table').bootstrapTable({
                url: '/B_Product/GetProductData',         //請求後臺的URL（*）
                method: 'get',                      //請求方式（*）
                toolbar: '#toolbar',                //工具按鈕用哪個容器
                striped: true,                      //是否顯示行間隔色
                cache: false,                       //是否使用緩存，預設為true，所以一般情況下需要設置一下這個屬性（*）
                pagination: true,                   //是否顯示分頁（*）
                sortable: false,                     //是否啟用排序
                sortOrder: "asc",                   //排序方式
                queryParams: function (pageRequest) {
                    return pageRequest;
                },//
                //傳遞參數（*）
                sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）
                pageNumber: 1,                       //初始化載入第一頁，預設第一頁
                pageSize: 10,                       //每頁的記錄行數（*）
                pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
                search: true,                       //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大
                strictSearch: true,
                showColumns: true,                  //是否顯示所有的列
                showRefresh: true,                  //是否顯示刷新按鈕
                minimumCountColumns: 2,             //最少允許的列數
                clickToSelect: true,                //是否啟用點擊選中行
                height: tableHeight(),                        //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度
                uniqueId: "Id",                     //每一行的唯一標識，一般為主鍵列
                showToggle: false,                    //是否顯示詳細視圖和列表視圖的切換按鈕
                cardView: false,                    //是否顯示詳細視圖
                detailView: false,                   //是否顯示父子表
                showExport: true,  //是否顯示導出按鈕
                buttonsAlign: "right",  //按鈕位置
                exportTypes: ['excel'],  //導出文件類型
                Icons: 'glyphicon-export',
                columns: [{
                    checkbox: true
                }, {
                        field: 'ID',
                        title: '編號',
                        visible: false
                }, {
                    field: 'PRODUCTID',
                    title: '產品編號'
                }, {
                    field: 'PRODUCTNAME',
                        title: '產品名稱'
                    }, {
                    field: 'PRODUCTUSER',
                    title: '貨主名稱'
                }, {
                    field: 'PRICE',
                    title: '單價（元）'                }, {
                    field: 'BARCODERULE',
                    title: '條碼規則'                               
                    }, {
                        field: 'ISUSING',
                        title: '啟用狀態',
                        formatter: function (value, row, index) {
                            if (value == "啟用")
                                return '<span class="glyphicon glyphicon-ok label label-success" style="font-size:90%"> 啟用</span>';
                            else
                                return '<span class="glyphicon glyphicon-remove label label-danger" style="font-size:90%"> 不啟用</span>';
                        }

                    }, {
                        field: 'REMARK1',
                        title: '備註'
                    }, 
                ]
            });

【說明】以上是表格初始化方法

　　①請求網址返回的數據是json數組

　　②傳遞的預設參數有頁數和頁的大小，如果在服務端分頁，分頁方式為：server

　　③表格隨動（隨著頁面大小的改變，表格的大小隨之改變）

 　　這裡寫了一個tableHeight（）方法獲取屏幕的高度，同時利用Windows的resize方法重新傳遞參數，刷新表格

1 function tableHeight() {
2     var h = $(window).height();
3     return h-25;
4 }

【重新設置表格屬性值並刷新】

1 $(window).resize(function () {
2                 $("#table").bootstrapTable('resetView', {
3                     height: tableHeight()
4                 });
5             });

$("#table").bootstrapTable("refresh");//表格刷新數據

④為表格設置checkbox

在columns:中設置第一列 checkbox: true，將會用全選功能
　　　　　　　 field: 'ID',       此名稱需和json對應的key值相同才會顯示對應的value值
                        title: '編號',       title是列名，顯示的名稱
                        visible: false     表示初始為不可見，可通過表格右上方的按鈕設置列的顯示和不顯示

⑤在表格中設置樣式

      表格中顯示按鈕等不同狀態的

　　　　　　formatter: function (value, row, index) {
                            if (value == "啟用")
                                return '<span class="glyphicon glyphicon-ok label label-success" > 啟用</span>';
                            else
                                return '<span class="glyphicon glyphicon-remove label label-danger" > 不啟用</span>';
                        }

　　返回的參數有三個，value代表當前值，row表示當前行，index當前行數