bootstrap table 个人心得

一、table元素

<table id="blackTable" ></table>  就这么多就够了，一定要有id或者class

二、table js初始化 

    

function initSmsTable(){
    var url = "/sms/plan/list";
    $('#smsTable').bootstrapTable({
        method:'POST',
        contentType: "application/x-www-form-urlencoded",
        cache: false,
        striped: true,                              //是否显示行间隔色
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        url:url,
        showColumns:true,
        pagination:true,
        queryParams : queryParams,
        pageNumber:1,                       //初始化加载第一页，默认第一页
        pageSize: 20,                       //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        uniqueId: "id",                     //每一行的唯一标识，一般为主键列
        showExport: true,
        exportDataType: 'all',
        responseHandler: responseHandler,
        columns: [
            {
                checkbox: true,//checkbox 选中
                align : 'center',
                formatter:function (value, row, index) {
                    if (row.status == 4 || row.status == 6)
                        return {
                            disabled : true,//设置是否可用
                            checked : false//设置选中
                        };
                    return value;
                }
            },{
                field : 'id',
                title : '编号',
                align : 'center'
            }, {
                field : 'smsChannel',
                title : '短信通道',
                align : 'center'
            }, {
                field : 'smstype',
                title : '短信类型',
                align : 'center',
                formatter : function (value){
                    switch(value){
                        case 1: return '验证码短信';break;
                        case 2: return '通知短信';break;
                        case 3: return '营销短信';break;
                        default: return '推广短信';
                    }
                }
            }, {
                field : 'cententTemplate',
                title : '短信内容',
                align : 'center',
                valign : 'middle'
            }, {
                field : 'targetUser',
                title : '目标用户',
                align : 'center',
                valign : 'middle'
            }, {
                field : 'sendCount',
                title : '发送数',
                align : 'center',
                valign : 'middle'
            }, {
                field : 'arriveCount',
                title : '到达数',
                align : 'center',
                valign : 'middle'
            }, {
                field : 'arrivePrecent',
                title : '到达率',
                align : 'center',
                valign : 'middle'
            }, {
                field : 'sendTimeStr',
                title : '发送时间',
                align : 'center',
                valign : 'middle'
            }, {
                field : 'statusStr',
                title : '状态',
                align : 'center',
                valign : 'middle'
            }, {
                field : 'note',
                title : '备注',
                align : 'center',
                valign : 'middle',
                formatter : function (value){
                    return  ( value&&value.length > 10 ? value.substr(0,10)+'...':value);
                }
            }]
    });
}

采用url请求json：columns对应表格头部，field 表示字段名，title即表格头部显示名称

    function responseHandler(res) {//这里有坑，此处是处理请求返回的数据
        if (res&&res.data) {//res.data表示返回的数据数表，一定去判断返回数据列是否为空，不能只判断res
            return {
                "rows" : res.data,
                "total" : res.total
            };
        } else {//返回数据0记录，显示无记录等提示信息
            return {
                "rows" : [],
                "total" : 0
            };
        }
    }

自定义条件查询

    function queryParams() {
        var param = {
            mobile : $("#blackMobile").val(),
            startTime : $("#blackStart").val(),
            endTime : $("#blackEnd").val(),
            limit : this.limit, // 页面大小
            offset : this.offset, // 页码
            pageIndex : this.pageNumber,
            pageSize : this.pageSize
        }
        return param;
    }

     //这里的key要跟ajax 入参一致，key取相应的搜索条件值

三、查询数据

function doSearch(){
    $('#blackTable').bootstrapTable('refresh');    //刷新表格
}