bootstrap-table 初级用法（个人笔记使用）

手里的一个项目用到了bootstrap-table。本来准备自己写，结果公司老鸟直接丢了一份文件过来。写在博客，当作笔记吧。

$(function () {

    //1.初始化Table

    var oTable = new TableInit();

    oTable.Init();

    

    //自定义选择器插件

    (function($) {

        $.extend($.expr[":"], {

            //选择器对象

            //a:htmlDom对象，i:htmlDom对象下标，m。

            validInput : function ( a, i, m) {

                if(a.value != "" && a.value != undefined)

                    return true;

            }

        });

    })(jQuery);

    $('#dataTable').bootstrapTable('hideColumn', 'id');

})

var TableInit = function () {

    var oTableInit = new Object();

    //初始化Table

    oTableInit.Init = function () {

        $('#dataTable').bootstrapTable({

            url: dataUrl,     //请求后台的URL（*）

            method: 'get',           //请求方式（*）

            toolbar: '#toolbar',        //工具按钮用哪个容器

            striped: true,           //是否显示行间隔色

            cache: false,            //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）

            pagination: true,          //是否显示分页（*）

            sortable: false,           //是否启用排序

            sortOrder: "asc",          //排序方式

            queryParams: oTableInit.queryParams,//传递参数（*）

            sidePagination: "server",      //分页方式：client客户端分页，server服务端分页（*）

            pageNumber:1,            //初始化加载第一页，默认第一页

            pageSize: 10,            //每页的记录行数（*）

            pageList: [10, 25, 50, 100],    //可供选择的每页的行数（*）

            strictSearch: true,

            clickToSelect: true,        //是否启用点击选中行

            uniqueId: "id",           //每一行的唯一标识，一般为主键列

            cardView: false,          //是否显示详细视图

            detailView: false,          //是否显示父子表

            columns: dataColumns

        });

    };

    //得到查询的参数

    oTableInit.queryParams = function (params) {

        return dataQueryParams(params);

    };

    return oTableInit;
};

这是一个通用的bootstrap-table初始化方法，写在一个JS文件中。其中的dataUrl 和dataColumns都由引用页面定义。灵活书写。

在html页面，bootstrap引用的css跟JS文件就不用多少，然后就是要声明 dataUrl和dataColumns

var dataUrl="#springUrl('/cms/driver/getList')"

    var dataColumns=[

      {

         field: 'id',

         checkbox: true,

         title: '序号'

    },{

        field:'driverNumber',

        title:'驾照号码'

    },{

        field:'fileNumber',

        title:'档案编号'

    },{

        field:'memberId',

        title:'会员编号'

    },{

        field:'issuingAuthority',

        title:'发证单位'

    },{

        field:'crTime',

        title:'创建时间'

        formatter: function (value, row, index) {

        return formatDate(row.crTime);

                    }

    },{

        field:'crUser',

        title:'创建用户'

    },{

        field:'lastTime',

        title:'最后操作时间'

        formatter: function (value, row, index) {

        return formatDate(row.lastTime);

                    }

    },{

        field:'lastUser',

        title:'当前用户'

    }];

   

 formatter这块可以用来对数据列进行整理。

后台穿值回来要是json格式，同时满足page对象的records（返回的查询的list）total(记录总数)

前台完成分页。目前能力只能看出来这么点，其他功能再做记录