Bootstrap-table使用，配置，及常见问题

1、什么是Bootstrap-Table

   Bootstrap 是基于HTML、CSS、JS的，用于快速开发web应用程序和网站的前端框架。
   在业务开发中，对表格记录的查询、分页、排序等处理是非常常见的，Bootstrap-table插件提供了非常丰富的属性设置。可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能。

插件可以用基于HTML5的data-field属性标识设置，也可以使用Javascript方式进行设置。

就是用Bootstrap的插件，在界面中创建表格，表格的控制通过各种配置实现。通过该插件创建的表格更加美观。

2、Bootstrap-Table 配置

HTML文件中的代码

首先在HTML中添加“<table>”标签，id 为该标签的id属性。

 <table id="createTable" ></table>

下列代码为js中为<table>标签添加表格的代码

    $('#' + createTable)
        .bootstrapTable(
            {
                id: dataId,
                method: 'get', // 服务器数据的请求方式 get or post 需要与后端的GetMapping或PostMapping对应
                url: url, // 服务器数据的加载地址
                striped: true, // 设置为true会有隔行变色效果 一般没用
                dataType: "json", // 服务器返回的数据类型
                sidePagination: "client", // 设置在哪里进行分页，可选值为"client" 或者"server" 设为"client"时配置以下三项
                pagination: true, // 设置为true会在底部显示分页条 它与下面两项同时使用
                pageSize: 10, // 如果设置了分页，每页数据条数
                pageNumber: 1, // 如果设置了分布，首页页码
                singleSelect: false, // 设置为true将禁止多选 
                search : true, // 是否显示搜索框 设为true显示搜索框 该搜索框匹配表格中所有单元格
                showColumns: false, // 是否显示内容下拉框（选择显示的列）
                cache: false,
                queryParams: function (params) {
                    return param;
                }, //用于向后端传递参数
                columns:
                    [
                        {
                            checkbox: checkboxFlag,
                            visible: checkboxFlag
                        },
                        {
                            title: '编号',//标题
                            formatter: function (value, row, index) {
                                return index + 1;
                            },
                            width: '4%'
                        },
                        {
                            field: 'name', // 列字段名 与返回的数字段名相同
                            title: '软件名称', // 列标题 标题显示值
                            width: '12%' ,//所占宽度比例 也可设定为'50px'这样的固定值
                            editable: { // 该插件将单元格设置为可编辑状态，通过配置的方式确定单元格的性质
                            // 若要使用该插件 需要在表头引用   <th:block th:include="include :: bootstrap-editable-css"/> 
                            // 表尾引用   <th:block th:include="include :: bootstrap-table-editable-js"/>
		                        type: 'text',  //选择编辑形式 如'date'、'select' 等 select的使用见下一列
		                        emptytext: "未填", //当字段为''时显示 "未填"
		                        success: function (data, index) { //点击确认后执行该方法
		                            var row = {
		                                "change_field_name": "备注",
		                                "change_field": "remark",
		                                "before_change_value": dataJson[0].remark,
		                                "after_change_value": index
		                            };
		                            field1.push(row); 
		                        }
		                    },
                            formatter: function (data) {
		                        if (data == undefined) {
		                            return "";
		                        } else {
		                            return data;
                        		}
                    		} //用于编写相应的方法，对数据进行处理，例如格式转换、数据字典转换等
                        },
                        {
                            field: 'version', // 列字段名
                            title: '软件版本', // 列标题
                            width: '10%',
                            editable: {
                        type: 'select',
                        emptytext: "未填",
                        source: function () { // select的加载根据此函数完成
                            var out = [];
                            for (var i = 0; i < measure_method.length; i++) {
                                out.push({
                                    "value": measure_method[i].dictValue,
                                    "text": measure_method[i].dictLabel
                                })
                            }
                            return out;
                        },
                        success: function (data, index) {
                            var row = {
                                "change_field_name": "计量方式",
                                "change_field": "measure_method",
                                "before_change_value": dataJson[0].measure_method,
                                "after_change_value": index
                            };
                            field1.push(row);
                        }
                    }
                        },
                        {
                            field: 'introduction', // 列字段名
                            title: '软件信息', // 列标题
                            visible: false //该参数表示不显示该列
                        },
                        {
                            field: 'install_time', // 列字段名
                            title: '安装时间', // 列标题
                            width: '10%'
                        },
                        {
                            field: 'status_name',
                            title:
                                '状态',
                            width: '5%'
                        }
                    ]
            });
}

3 Bootstrap常见问题（我会持续更新常见问题，若有问题可留言，我会更新到博客中）

1、在js中通过语句$("#"+id).bootstrapTable()来调用bootstrap插件。

2、$('#' + tableId).bootstrapTable('destroy')用于清除之前存在的表格。若不清除动态调用时表格不会改变

3、该代码可向后端传参

queryParams: function (params) {
                    var search = $.table.queryParams(params);
					search.instanceId = $("#instanceId").val();
					return search;
                },

4、使用editable
使用该插件 需要在表头引用 <th:block th:include=“include :: bootstrap-editable-css”/> 表尾引用 <th:block th:include=“include :: bootstrap-table-editable-js”/> 文件 可在网上搜索下载

5、bootstrapTable 所接收的数据应为“数组”而不是“对象”
数据最外层应为[] 而不是 {}

6、子行显示：
1）、在配置项中设置：

 detailView: true,

2）、设置扩展行方法

onExpandRow: function (index, row, $detail) {
            initChildTable(index, row, $detail);
        },

3）、方法中设置数据值即可

/**
 * 初始化子表
 *
 */
initChildTable = function (index, row, $detail) {
    var instruInfo;
    var cur_table;
    var appendixArr;
    if (instruList.has(row.instru_id)) {
        instruInfo = instruList.get(row.instru_id);
        //使用一份深拷贝的附件array副本，作为子表的数据源
        //如果直接使用instruList,展开/折叠 父子表后，添加附件时会添加两份
        appendixArr = JSON.parse(JSON.stringify(instruInfo.appendix));
        cur_table = $detail.html('<table style="table-layout:fixed"></table>').find('table');
        instruInfo.childtable = cur_table;
    }
    $(cur_table).bootstrapTable({
        uniqueId: "id",
        data: appendixArr,
        columns: [
            {
                field: 'index',
                title: '附件序号',
                width: '10%',
                align: "center",
                formatter: function (value, item, index) {
                    return index + 1;
                }
            },
            {
                field: 'id',
                title: '附件借用表中ID',
                visible: false
            },
            {
                field: 'instru_borrow_act_main_id',
                title: '仪器借用主表ID',
                visible: false
            },
            {
                field: 'instru_borrow_act_main_id',
                title: '仪器借用主表ID',
                visible: false
            },
            {
                field: 'instru_id',
                title: '仪器ID',
                visible: false
            },
            {
                field: 'attachment_name',
                title: '附件名称',
                width: '40%',
                align: "center"
            },
            {
                field: 'attachment_number',
                title: '借用数量',
                width: '20%',
                align: "center"
            },
            {
                field: 'back_attachment_number',
                title: '归还数量',
                width: '20%',
                align: "center",
                editable: {
                    type: 'text',
                    title: '数量',
                    emptytext: "请输入数量",
                    validate: function (value) {
                        if ($.trim(value) == '') {
                            return "";
                        }
                        var regx = /^[0-9]*$/;
                        if (!regx.test(value)) {
                            return '请输入合法数值';
                        }
                    }
                },
                formatter: function (value, row, index) {
                    if (value == undefined) {
                        return "";
                    } else {
                        return value;
                    }
                }
            }
        ],
        onEditableSave: function (field, row, oldValue, $el) {
            //更新相应附件数据
            var instruInfo;
            if (instruList.has(row.instru_id)) {
                instruInfo = instruList.get(row.instru_id);
                //更新对应appendIndex的附件数据
                for (var i = 0; i < instruInfo.appendix.length; i++) {
                    if (instruInfo.appendix[i].id == row.id) {
                        instruInfo.appendix[i].back_attachment_number = row.back_attachment_number;
                        break;
                    }
                }
            }
        }
    });
};