BootStrap table 使用总结（二）如何自定义参数，传递给后台以及怎么在表格中添加按钮并绑定事件

我们在上一篇博客中已经介绍了bootStrap table的简单使用，下面来介绍BootStrap table 如何自定义参数并传递给后台。

我们知道bootstrap boot 已经给我们提供了一些参数，但是这一些不能满足我们的项目需求，这时我们就需要自定义参数，下面我们就来说明一下自定义参数的具体实现。

//保存选择的数据信息并展示到指定的table中
function save() {
    var ids = new Array();
    var j = 0;
    var rows = getSelectedRows();
    for (var i = 0; i < rows.length; i++) {
        ids[j++] = rows[i].etlId;
    }
    ids = JSON.stringify(ids); //将获取的行信息赋值给自定义的数组
    $('#etlTable').bootstrapTable({
        search: false,
        pagination: true,
        sidePagination: 'server',//服务器端分页
        url: "../etl/selectMtsByIds",
        pageSize: 5,
        pageList: [5, 10, 15, 20],
        queryParams: function (params) {
            return {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                offset: params.offset,
                limit: params.limit,
                ids: ids  //这个是自定义的参数，共后台接受
            }
        },
        responseHandler: function (res) {
            console.log(res)
            return {
                rows: res.list,
                total: res.total
            }
        },
        columns: [{title: 'id', field: 'etlId', hidden: true},
            {title: '数据库名称', field: 'etlName'},
            {title: '数据库IP', field: 'etlIp'},
            {title: '数据库用户名', field: 'etlUsername'},
            /*{ title: '数据库密码', field: 'etlPassword'},*/
            {title: '数据库端口号', field: 'etlPort', hidden: true},
            {title: '数据库实例名', field: 'etlService'},
            {
                title: '操作', field:  
                    'operate', //这一列添加按钮，在下面的方法中需要给按钮添加事件
                events: operateEvents, 
                formatter: operateFormatter,
                width:200  //设置表格的列宽
            },
        ]
    });
    //关闭数据源信息的模态框
    $('#myModal').modal('hide');

}


//选择多条记录，获取选择的行信息
function getSelectedRows() {
    //返回所有选择的行，当没有选择的记录时，返回一个空数组
    var rows = $("#table").bootstrapTable('getSelections');
    if (rows.length == 0) {
        layer.alert('你没有选择数据');
        return;
    }
    return rows;
}，

//添加按钮
function operateFormatter(value, row, index) {
    return [
        '<button id="btn_operate" type="button" class="RoleOfA  btn-warning btn-xs">处理</button>',
    ].join('');
}
//添加事件
window.operateEvents = {
    'click #btn_operate': function (e, value, row, index) {
        $.ajax({
            type: "POST",
            url: "../etlLog/updateErrLogInfo",
            data: row.logId,
            dataType: "json",
            async: false,//设置为同步传输
            success: function (result) {
                if (result.code == 1) {
                    layer.alert(result.msg);
                } else {
                    layer.alert(result.msg);
                }
                $('#table').bootstrapTable('refresh'); //刷新表格
            }
        });
    }
};

后台代码

//String ids  这个是接受的自定义的参数
 @RequestMapping("/selectMtsByIds")
    @ResponseBody
    public PageInfo<MtsEtlInfo> selectMtsByIds(@RequestParam(defaultValue = "1",value = "offset")
                                                       Integer offset,@RequestParam(defaultValue = "100",value = "limit") Integer limit,@RequestParam("ids")String ids){
    
        List<String>  collection = JSONObject.parseArray(ids, String.class);//把Json字符串转换成java类型的集合
        List<MtsEtlInfo> mtsEtlInfos = mtsEtlInfoService.selectEtlByIds(collection);
        PageHelper.startPage(offset,limit);
        PageInfo<MtsEtlInfo> pageInfo = new PageInfo<>(mtsEtlInfos);
        return pageInfo;
    }

这里有彩蛋

教你如何使用BootStrap table，BootStrap table使用总结（一） （带有详细的案例）

bootTrap table 使用总结（三） 点击当前行，弹出具体的详细信息(使用detailFormatter属性）

Bootstrap table 中文帮助文档