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