BootStrap Table的JS封装

目前很多项目前台都使用bootstrap技术，初次接触时看了点网上的视频教程，深深地被它的样式所吸引，因为它是一个响应式的框架，可以根据浏览器的宽高自适应显示。

作为一名后台开发人员，bootstrap
table分页的实现是后台必备的利器。以下是在guns框架的bootstrap-table-object.js文件中对bootstrap
table的js封装。

/** * 初始化 BootStrap Table 的封装 * * 约定：toolbar的id为 (bstableId + "Toolbar") * * @author fengshuonan */(function () {    var BSTable = function (bstableId, url, columns) {        this.btInstance = null;                 //jquery和BootStrapTable绑定的对象        this.bstableId = bstableId;        this.url = Feng.ctxPath + url;        this.method = "post";        this.paginationType = "server";         //默认分页方式是服务器分页,可选项"client"        this.toolbarId = bstableId + "Toolbar";        this.columns = columns;        this.height = 665;                      //默认表格高度665        this.data = {};        this.queryParams = {}; // 向后台传递的自定义参数    };    BSTable.prototype = {        /**         * 初始化bootstrap table         */        init: function () {            var tableId = this.bstableId;            this.btInstance =                $('#' + tableId).bootstrapTable({                    contentType: "application/x-www-form-urlencoded",                    url: this.url,              //请求地址                    method: this.method,        //ajax方式,post还是get                    ajaxOptions: {              //ajax请求的附带参数                        data: this.data                    },                    toolbar: "#" + this.toolbarId,//顶部工具条                    striped: true,              //是否显示行间隔色                    cache: false,               //是否使用缓存,默认为true                    pagination: true,           //是否显示分页（*）                    sortable: true,             //是否启用排序                    sortOrder: "desc",          //排序方式                    pageNumber: 1,                  //初始化加载第一页，默认第一页                    pageSize: 14,               //每页的记录行数（*）                    pageList: [14, 50, 100],    //可供选择的每页的行数（*）                    queryParamsType: 'limit',   //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort                    queryParams: function (param) {                        return $.extend(this.queryParams, param);                    }, // 向后台传递的自定义参数                    sidePagination: this.paginationType,   //分页方式：client客户端分页，server服务端分页（*）                    search: false,              //是否显示表格搜索，此搜索是客户端搜索，不会进服务端                    strictSearch: true,         //设置为 true启用 全匹配搜索，否则为模糊搜索                    showColumns: true,          //是否显示所有的列                    showRefresh: true,          //是否显示刷新按钮                    minimumCountColumns: 2,     //最少允许的列数                    clickToSelect: true,        //是否启用点击选中行                    searchOnEnterKey: true,     //设置为 true时，按回车触发搜索方法，否则自动触发搜索方法                    columns: this.columns,      //列数组                    pagination: true,           //是否显示分页条                    height: this.height,                    icons: {                        refresh: 'glyphicon-repeat',                        toggle: 'glyphicon-list-alt',                        columns: 'glyphicon-list'                    },                    iconSize: 'outline'                });            return this;        },        /**         * 向后台传递的自定义参数         * @param param         */        setQueryParams: function (param) {            this.queryParams = param;        },        /**         * 设置分页方式：server 或者 client         */        setPaginationType: function (type) {            this.paginationType = type;        },        /**         * 设置ajax post请求时候附带的参数         */        set: function (key, value) {            if (typeof key == "object") {                for (var i in key) {                    if (typeof i == "function")                        continue;                    this.data[i] = key[i];                }            } else {                this.data[key] = (typeof value == "undefined") ? $("#" + key).val() : value;            }            return this;        },        /**         * 设置ajax post请求时候附带的参数         */        setData: function (data) {            this.data = data;            return this;        },        /**         * 清空ajax post请求参数         */        clear: function () {            this.data = {};            return this;        },        /**         * 刷新 bootstrap 表格         * Refresh the remote server data,         * you can set {silent: true} to refresh the data silently,         * and set {url: newUrl} to change the url.         * To supply query params specific to this request, set {query: {foo: 'bar'}}         */        refresh: function (parms) {            if (typeof parms != "undefined") {                this.btInstance.bootstrapTable('refresh', parms);            } else {                this.btInstance.bootstrapTable('refresh');            }        }    };    window.BSTable = BSTable;}());

前台html代码调用变得十分简单。

$(function () {    var defaultColunms = Student.initColumn();    var table = new BSTable(Student.id, "/student/list", defaultColunms);    table.setPaginationType("client");    Student.table = table.init();});

第一步：准备请求后台调用的地址/student/list。即构建BSTable对象的第二个参数。需要配合后台开发人员使用各种框架实现。

第二步：显示列字段的准备。即构建BSTable对象的第三个参数。只需要在页面构建一个如下bootstrap需要的对象。

Student.initColumn = function () {    return [        {field: 'selectItem', radio: true},        {title: 'id', field: 'id', align: 'center', valign: 'middle',width:'50px'},        {title: '姓名', field: 'name', align: 'center', valign: 'middle', sortable: true},        {title: '地址', field: 'address', align: 'center', valign: 'middle', sortable: true}];};

第三步：方法的调用。

table.init();

从代码的封装来看，最终还是调用了bootstrap的bootstrapTable方法，只不过我们通过需要准备哪个table（table的id）,url（请求地址），columns（请求的列），其他的参数都以默认的实现，如method为post,高度为665，默认服务器端分页。
特别需要注意的是：约定：toolbar的id为 (bstableId + “Toolbar”)
如要修改默认的实现，只需要修改该封装代码即可，如 clickToSelect: true, //是否启用点击选中行，我们还可以通过设置table.setPaginationType(“client”);实现客户端分页，而不用请求服务器后台。