<script>
$(function () {
$('#msgTable').bootstrapTable({
url: '[[${#request.getContextPath()}]]/msg/getMessages',
cache: false, sidePagination: 'server', uniqueId: "id",
pagination: true, pageNumber: 1, pageSize: 10, pageList: [10, 20, 30, 40, 50],
columns: [
{checkbox: true, visible: true}, //是否显示复选框
{field: 'id', title: '编号', align: 'center'},
{
field: 'content', title: '内容', align: 'center',
formatter: function (value, row, index) {
let s = '<a href="#" onclick="view(\''
+ row.id + '\', \''
+ row.file.fileName + '\', \''
+ row.file.filePath + '\')">';
return value.replace('#', s) + '</a>!';
}
},
{field: 'fromUser.username', title: '发送人', align: 'center'},
{field: 'createTime', title: '发送时间', align: 'center'},
//isRead 此处根据返回的isRead值判断显示
{field: 'isRead', title: '是否已读', align: 'center',
formatter: function (value, row, index) {
var type = '';
switch (value) {
case 0 :
type = '未读';
break;
case 1 :
type = '已读';
break;
default :
type = '忽略分享';
}
return type;
}
},
{
field: 'id', title: '操作', align: 'center',
formatter: function (value, row, index) {
return '<a href="#" onclick="detail(\'' + value + '\')">忽略分享</a>';
}
}
],
queryParams: function (params) {
//这里的键的名字和控制器的变量名必须一致,这边改动,控制器也需要改成一样的
params = {
pageNum: (params.offset / params.limit) + 1, //页码
pageSize: params.limit //页面大小
};
return params;
}
});
});
</script>
解析:
①前端元素表单:
②js部分:
横线一:相对应的表单元素接收boostrapTable函数后的结果。
横线二:
field:代表返回结果的json格式中对应的属性值
formatter:用于对该列显示内容进行格式化的函数。有三个参数,value,row,index,
value:返回的json对应field的值。
row:该行。
index:该行的下标。
return:需要最终在该列显示的值。
此处根据isRead的值进行不一样的显示:
关于field=‘content’那部分的前端结果:
queryParams:用于在boostrapTable初始化发送请求的时候,传输需要的参数到web接口中。