第九章 BootstrapTable的使用

一、簡介

BootstrapTable是一個Bootstrap 3 的表格插件，支持單選, 復選框, 排序, 分頁等功能

官網：http://bootstrap-table.wenzhixin.net.cn/

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

二、常用屬性

 1.開啟查詢

search: true,
searchAlign: "left",
searchOnEnterKey: true, //回車查詢

2.顯示刷新按鈕

showRefresh: true,

3.單選/多選

singleSelect: true,
clickToSelect: true,//點擊行則選中
maintainSelected: false,//分頁仍然選中
columns: [
　　{
　　　　field: 'Id',
　　　　checkbox: true
　　}]

 獲取選中的id列表

function deleteAll() {
            var selection = $table.bootstrapTable('getSelections');
            if (selection.length == 0) {
                toastr.info('請至少選中一行記錄');
                return false;
            }
            swdel({},
                function () { 
                    var selects = new Array();
                    $.each(selection,
                        function (index, value, array) {
                            selects.push(value.Id);
                        });

                    $.post(deleteAllUrl,
                        { "Id": selects },//后台獲取Request.Form["id[]"]
                        function(result) {
                            if (result) {
                                if (result.code >= 0) {
                                    toastr.success(result.msg, "操作成功");
 　　　　　　　　　　　　　　　　　　　　　$table.bootstrapTable('uncheckAll');//清空選中選中
                                    $table.bootstrapTable('refresh');
                                } else {
                                    toastr.warning(result.msg, "操作失敗");
                                }
                            } else {
                                toastr.warning('請求失敗');
                            }
                        },'json'); 
                });
        };

 如果開啟多選，查詢的時候，使用 $table.bootstrapTable('uncheckAll');清除已選選項

 

4.開啟分頁

pagination: true,

sidePagination:'client' //或 'server' ，服務端必須使用url或ajax獲取數據

客戶端分頁的數據格式:

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

服務端分頁的數據格式:

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

 

5.數據源

后台模型

public class PagerDataModel<T>
    {
        public int total { get; set; }
        public List<T> rows { get; set; }
        public int page { get; set; }

        public PagerDataModel<T> Init(int skip,int limit)
        {
            this.page = (skip / limit) + 1;
            return this;
        }
 
        public PagerDataModel( int skip, int limit)
        {
            Init(skip, limit);
        } 
    }

分頁接收的json格式: {total:0,page:0,rows:[{id:1}

$table.bootstrapTable({responseHandler: handler});

function handler(res) {
　　return res; //如果使用server分頁，這里使用res.row
}

 

6.單元格的格式化

　　如行的刪除按鈕

$table.bootstrapTable({ 
                columns: [ 
                    {
                        title: '操作',
                        align: 'center',
                        field: 'Status',
                        valign: 'middle',
                        formatter: formatOperat
                    } 
                ]
            })
            
            
function formatOperat(value, row, index) {
    return ['<button type="button" onclick="deleteItem(\'' + row.Id + '\')" >移除</button>'];
}

 7.行樣式

直接css或class控制樣式，

以下是隔行變色的寫法，此效果使用 data-striped="true"可實現，這里用來做示例。

缺點：使用checkBox，它的背景色不會改變，

rowStyle: function (row, index) {
                    if (index % 2) {
                        //return { classes: "bg-info" };
                        return { css: { "background-color": "#f8f8f8" } };
                    }
                    return { classes: "" };
                },

 

三、bug記錄

1.三個聯動table的使用jQuery Event的click-row.bs.table事件

如： 點擊table1的行3次，在點擊table2的行，這時候會導致連接table3的url進行了3次

$table1.on("click-row.bs.table", function (row, event) {
    showTable2(event.Id);//顯示第二個聯動table
});
$table2.on("click-row.bs.table", function (row, event) {
    showTable3(event.Id);//顯示第三個聯動table
}); 

解決：使用他自帶的Option Event的onClickRow事件

 

  
   
$table.bootstrapTable({
                url: url,
                dataType: "json",
                search: true,
                searchAlign: "left",
                buttonsAlign: "left",
                showRefresh: true,
                searchOnEnterKey: true,
                clickToSelect: true,
                singleSelect: true,
                maintainSelected: false,
                responseHandler: handler,
                idField: "Id",
                onClickRow: function (row, $element, field) { showTable2(row.Id); ....//省略
 },
                columns: [
                      {
                          field: 'state',
                          radio: 'true'
                      }, 
                      ...//省略
                    {
                        title: '操作',
                        align: 'center',
                        field: 'Status',
                        valign: 'middle',
                        formatter: formatOperat
                    }

                ]
            })

 2.使用radio，並啟用clickToSelect: true, ，出現BUG：點擊radio無反應

場景：實現點擊行刷新另外一張表，但點擊最后一個單元格不執行該操作，因為最后單元格自定義了自己的一系列操作

解決方法

　　解析：啟用clickToSelect后，單擊行會自動選中chebox或者radio，觸發onCheck事件；

　　　　onCheck中如果直接寫執行代碼，但這些代碼是和onClickCell是一樣的，那么導致重復執行；

　　　　最后通過引入外部curField來控制解決。

　　代碼：

            var curField = 0;
            $table.bootstrapTable({
                url: "/Get?Id=1",
                dataType: "json",
                search: true,
                searchAlign: "left",
                buttonsAlign: "left",
                showRefresh: true,
                searchOnEnterKey: true,
                clickToSelect: true,
                singleSelect: true,
                selectItemName: "custonSelectItem",
                striped: true,
                maintainSelected: false,
                responseHandler: handler,
                idField: "Id",
                onClickCell: function (field, value, row, $element) {
                    curField = 1;
                    if (field !== "Status") {
                        //執行代碼
                    }
                },
                onCheck: function (row, $element) {
                    if (curField === 0) {
                        //執行代碼
                    } else {
                        curField = 0;
                    }
                },
                columns: [
                    {
                        field: 'state',
                        radio: 'true'
                    },
                    {
                        title: '名稱',
                        field: 'Name',
                        align: 'center',
                        valign: 'middle'

                    },
                    {
                        title: '操作',
                        align: 'center',
                        field: 'Status',
                        valign: 'middle',
                        formatter: formatOperat
                    }
                ]
            });