bootstraptable 汇总_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");

}