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;
}
}
}
}
});
};
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
