第九章 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
                    }
                ]
            });