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