第九章 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": ,

        "name": "Item 0",

        "price": "$0"

    },

]

服务端分页的数据格式:

{

    "total": ,

    "rows": [

        {

            "id": ,

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

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

            $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 = ;

                    if (field !== "Status") {

                        //执行代码

                    }

                },

                onCheck: function (row, $element) {

                    if (curField === ) {

                        //执行代码

                    } else {

                        curField = ;

                    }

                },

                columns: [

                    {

                        field: 'state',

                        radio: 'true'

                    },

                    {

                        title: '名称',

                        field: 'Name',

                        align: 'center',

                        valign: 'middle'

                    },

                    {

                        title: '操作',

                        align: 'center',

                        field: 'Status',

                        valign: 'middle',

                        formatter: formatOperat

                    }

                ]

            });

巴特西

第九章 BootstrapTable的使用

一、简介

二、常用属性

三、bug记录

最新文章

热门文章