bootstrap-table 入门使用与简单封装

使用 Js初始化自己的bootstrap table

最近项目中需要用到大量列表展示数据，经过一番考察选择了 bootstrap-table.js 。

优点

• 自带分页控件支持前后端分页。
• 自适应
• 表头可固定
• ajax加载数据
• checkbox/radio
• 行内操作事件
• 文档全！这点很重要！

---

开始使用

我们需要的几个伙计：

1. jquery.js
2. bootstrap.js
3. bootstrap.css
4. bootstrap-table.js
5. bootstrap-table.css

现在我们看一下自己要做的事情：

• 创建html文件，引入我们的伙计
• html创建<table id="table">标签
  
  

//因为后面很多重复应用此配置 所以简单做了处理提取到了公共文件。
var baseTableConfig = function(url, params, columns){   
    return {
        url: url,
        queryParams: function (page) {
            return $.extend(param, {
                pageSize: page.limit,
                pageNumber: page.offset / page.limit + 1
            });
        },
        toolbarAlign: 'left',//工具条位置
        //showJumpTo:true,//跳转页 此为拓展功能
        columns: columns,//列
        queryParamsType: 'limit',
        method: 'get',//请求方式
        showColumns: false,//列显示隐藏操作按钮
        clickToSelect: true,//点击行选中
        contentType: "application/x-www-form-urlencoded",
        cache: false,//缓存
        onlyInfoPagination: false,//
        showRefresh: false,//显示刷新按钮
        pagination: true,//分页
        smartDisplay: false,
        sidePagination: 'server',//分页 server为后端分页 client为前端分页
        striped: true,//斑马纹
        paginationLoop: false,//循环分页
        height: tableHeight(),
        onLoadSuccess: function (res) {
            console.log('加载成功');
        }
    }
}



//调用
var tableInit = function(){
    var queryUrl = 'getDataList/getMainData';
    var params = {
        id:$('#id').val()
    };
    var columns = [
        {checkbox:true},
        {
            field:"business_name",
            title:'监控项目'
        },{
            field:'business_desc',
            title:'描述'
        },{
            field:'business_dept',
            title:'部门'
        },{
            field:'operations',
            title:'操作',
            formatter:function(value, row, index){
                return [
                    '<a href="javascript:;" class="modify btn-in-table">修改</a>',
                    '<a href="javascript:;" class="delete btn-in-table">删除</a>'
                    ].join(' ');
            }，
            events:{
                'click .modify':function(e, value ,row, index{
                    // do someting
                },
                'click .delete':function(e, value, row, index){
                    // do someting
                }
            }
        }
    ];

    var tableConfig = $.extend(baseTableConfig(url, params, columns),{
        //这里是其他的一些个性化的 bootstrap-table options
        //例如 覆盖一些公共的配置
        //例如 添加一些私有的配置
        //例如格式化数据
        responseHandler:function(res){
            console.log(res.data);
            return {
                rows: '' || res.data.data,
                total: '' || res.data.total
            }
        }
    });
    //调用实例化
    $('#table').bootstrapTable(tableConfig);
};

$(function(){
    //Bingo
    tableInit();
})

至此我们的表格就可以正常显示了。