bootstrap table使用

• 初始化表格

function initTable(tb) {
        tb.bootstrapTable({
            height: getHeight(),//设置高度
            url: '', //请求后台的URL（*）
            toolbar: '#toolbar', //工具按钮用哪个容器
            striped: true, //是否显示行间隔色
            cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            showToggle: true, //是否显示详细视图和列表视图的切换按钮
            showExport: true,
            detailView: false,
            detailFormatter: false,
            pageSize: 10,
            pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
            showFooter: false,
            minimumCountColumns: 2, //最少允许的列数
            showPaginationSwitch: true,
            pagination: true, //是否显示分页（*）
            uniqueId: "id", //每一行的唯一标识，一般为主键列
            sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
            responseHandler: responseHandler,
            queryParams: queryParams,
            sortable: true, //是否启用排序
            sortOrder: "asc", //排序方式
            sortName: "id",
            search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showRefresh: true, //是否显示刷新按钮
            clickToSelect: true, //是否启用点击选中行
            cardView: false, //是否显示详细视图
            detailView: false, //是否显示父子表
            contentType: 'application/x-www-form-urlencoded',
            columns: [{
                checkbox:true
            },{
                field: 'state',
                sortable: true,
                title: '状态',
                formatter:function (value, row,index) {
                    color1 = "未执行计划";
                    color2 = "计划中断中";
                    color3 = "运行中";
                    color4 = "已完成";

                    if (value == 3) {
                        return color1;
                    } else if (value  == 4) {
                        return color2;
                    } else if (value  == 5) {
                        return color3;
                    }else{
                        return color4;
                    }
                }
            }, {
                field: 'operate',
                title: '操作',
                align: 'center',
                width : 300,
                events: operateEvents,
                formatter: operateFormatter
                }]
        });
    };
//得到查询的参数
function queryParams(params) { 
  //搜索栏
    var val = $('#search_id').val();
    //后台获取的查询数据格式如下：
        var search = '{"search_name1":"' + val + '","search_name2": "' + val + '" }';
        var order = '{"' + params.sort + '":"' + params.order + '"}'
        var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            pageSize: params.limit, //页面大小
            curPage: params.offset / params.limit + 1, //页码
            search: search,
            order: order,
        };
        return temp;
 }
//把接口返回数据格式改为正确的
function responseHandler(res) {
      //dosomething
    //如field: 'state'的 formatter:function (value, row,index){}也可以挪到这里
}

• 刷新表格

$('#table_id').bootstrapTable('refresh');

• 表格列数据居中

 columns: [
   field: 'column1',
   sortable: true,
   title: 'column1_title',
   cellStyle : function cellStyle(value, row, index) {
      return {
        css : {
            "text-align" : "center"
        }
      };
    }
]

• 设置高度

//可以在初始化表格时固定表格高度:  height:100，固定表格高度很不友好，需要根据表格内容调整表格高度，使用下面的函数
function getHeight() {
        return $(window).height() - $('h1').outerHeight(true);
    }

• 表格列中添加button按钮及事件
  如初始化表格最后一列 field: 'operate'，其中 window.operateEvents需要放在初始化表格前面

 window.operateEvents = {
         'click .aaa': function (e, value,row, index) {
             var formData=[]
            formData.push({
                name:"name1",
                value:value1
            });
            formData.push({
                name:"name2",
                value:"value2"
            });    
            // console.log(formData)
            if(confirm("确认提交？")){
                $.ajax({
                    url:"",
                    type: 'GET',
                    dataType: 'json',
                    data: formData,
                    headers: {
                        "Cache-Control" : "no-cache, no-store, must-revalidate",
                        "Pragma": "no-cache",
                        "Expires": "0"
                    },
                    // contentType: 'application/x-www-form-urlencoded',
                    success:function(data){ 
                        // var data = JSON.parse(data);
                        // alert(data.msg) 
                        $('#table_id').bootstrapTable('refresh');
                     },
                     error:function(XMLResponse,XMLHttpRequest, textStatus, errorThrown){
                        // alert(XMLHttpRequest.status);
                        // alert(XMLHttpRequest.readyState);
                        // alert(textStatus);
                        // alert(XMLResponse)
                        $('#table_id').bootstrapTable('refresh');
                        // alert(XMLResponse.responseText)
                    },
                    // complete: function(XMLHttpRequest, textStatus) {
                    //     alert(XMLHttpRequest.status);
                    //     alert(XMLHttpRequest.readyState);
                    //     alert(textStatus);
                    // }
                })
            }
            else{
                return
            }            
      }
        , 'click .bbb': function (e,value,row, index) {
                      //dosomething
           }
    };  

 function operateFormatter(value, row, index) {
        return [
            'aaa'
            ,'bbb'

    };