表格组件：bootstrap-table（二：高级使用）

在 表格组件：bootstrap-table（一：基础使用） 中，介绍了 bootstrap-table的基础使用。但在实际应用中，更希望将bootstrap-table 封装，进行简单的配置即可。

这样做的好处有：

1）配置简单，调用方便。

2）统一配置，后期维护方便。

3）易于扩展

一、创建 my_table 类

接下来，我们首先建立 my_bootstrap_table.js ，并在其中定义 my_table 类。

(function () {
    
    var my_table = {
    
    };

}());

二、定义 my_table 类基础属性

接下来，为 my_table 类定义一些基础属性：

var my_table = function (obj, url, cloumns) {
    this.url = url; //请求地址
    this.obj = obj; //表格dom
    this.method = 'get'; //请求类型
    this.sidePagination = 'server'; //分页方式
    this.columns = cloumns; //表头属性
    this.queryParam = {};//自定义参数
    this.instance = null;
    this.sortName = null; //排序名
    this.sortOrder = null; //排序字段
    this.sortable = true;
    this.pagination = true; //是否开启分页
    this.height = null; //表格高度
    this.rowStyle = ''; //行样式
    this.classes = 'table table-hover'; //表格样式
};

三、定义 my_table 类 初始化方法

接下类，为 my_table 类定义 init 初始方法：

gyl_table.prototype = {
    init: function ()
    {
      var obj = this.obj;
      var _self = this;
        this.instance = $("#" + obj).bootstrapTable({
          url: this.url,
          method: this.method,
          height: this.height,
          classes: this.classes,
          striped: false, //行间隔色
          cache: false, //禁用缓存
          sidePagination: this.sidePagination,
          pagination: this.pagination,
          pageNumber: 1,
          pageSize: 15,
          pageList: [5, 10, 15, 30, 'All'],
          iconSize: "outline",
          clickToSelect: true,
          sortable: this.sortable,
          sortName: this.sortName,
          sortOrder: this.sortOrder,
          queryParams: function (param) {
              if(param.limit == 'All')
            {
                param.offset = 1;
              param.limit = _self.allData.total;
            }
            return $.extend(_self.queryParam, param);
                }, //自定义参数
          responseHandler: function (res) {
             _self.allData = res;
            return res;
          },
          search: false,
          columns: this.columns,
        });
     return this;
   }
 }

三、为my_table.js 注册全局对象

window.my_table = my_table ;

四、调用实例

var table = new my_table("table_list",url, columns());
table.init();

五、扩展方法

定义完类后，可以对 my_table 类 添加 set、get 方法，以便适应各个表格的 特殊需求。

设置搜索参数：

setQueryParams: function (param) 
{
    this.queryParam = param;
}

设置排序参数：

setSortParams: function (param)
{
    this.sortName = param.sortName;
    this.sortOrder = param.sortOrder;
},

获取表格数据：

getData: function ()
{
    return this.instance.bootstrapTable('getData');
},

获取表格选择的数据：

getAllSelectedData: function ()
{
    return this.instance.bootstrapTable("getAllSelections");
}