表格组件:bootstrap-table(二:高级使用)

  • A+
所属分类:Bootstrap JS

在 表格组件: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");
}

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: