需求: 点击电池电量的箭头,按照升序降序排列
点击时间的箭头 按照升序降序排列
逻辑: 电量排序在 /device/list 这个搜索接口增加一个sort参数,如果选的是时间升序传 timestamp_asc 这个值,如果选的是时间升序和电量升序就传 timestamp_asc,battery_asc 这两个值用逗号隔开
定义: 时间排序: timestamp_desc 代表降序 timestamp_asc 代表升序 电量排序: battery_asc 代表升序 battery_desc 代表降序
代码: 当用户同时选择多个排序字段且要求升序排序时,将排序字段和排序顺序拼接成一个字符串,并使用逗号进行分隔。以下是优化后的代码:
代码语言:javascript复制$('#mytab').bootstrapTable({
method: 'get',
url: basePath "/device/list", // 请求路径
striped: true, // 是否显示行间隔色
pageNumber: 1, // 初始化加载第一页
pagination: true, // 是否分页
sidePagination: 'server', // server:服务器端分页|client:前端分页
pageSize: 15, // 单页记录数
pageList: [15, 20, 30], // 可选择单页记录数
queryParams: function (params) { // 上传服务器的参数
var temp = {
limit: params.limit, // 每页显示数量
offset: params.offset, // SQL语句起始索引
page: (params.offset / params.limit) 1, // 当前页码
name: $("#sname").val(),
deviceId: $("#deviceId").val(),
organId: $("#organ option:selected").val(),
battery: $("#batteryselect option:selected").val(),
sort: "", // 初始化sort参数为空
};
// 根据排序字段和排序顺序确定排序方式
var sortFields = [];
if (params.sort && params.order) {
var sortFieldArr = params.sort.split(",");
var sortOrderArr = params.order.split(",");
for (var i = 0; i < sortFieldArr.length; i ) {
var sortField = sortFieldArr[i];
var sortOrder = sortOrderArr[i];
if (sortField && sortOrder) {
var sort = sortField "_" sortOrder;
sortFields.push(sort);
}
}
}
if (sortFields.length > 0) {
temp.sort = sortFields.join(","); // 使用逗号拼接排序字段
}
return temp;
},
columns: [{
title: '时间',
field: 'timestamp',
formatter: formatTime,
sortable: true
}, {
title: '姓名',
field: 'name',
sortable: true
}, {
title: '所属部门',
field: 'organName',
sortable: true
}, {
title: '终端编号',
field: 'deviceId',
sortable: true
}, {
title: '电池电量',
field: 'battery',
formatter: formatBattery,
sortable: true
}, {
title: '操作',
field: 'id',
formatter: option1
}]
});
假设用户可以同时选择多个排序字段,并为每个排序字段指定排序顺序。在queryParams函数中,通过拆分params.sort和params.order来获取排序字段和排序顺序的数组。
遍历排序字段数组,并使用排序字段和排序顺序拼接成一个字符串(例如timestamp_asc),并将其添加到sortFields数组中。
如果存在排序字段,将它们使用逗号拼接成一个字符串,并将其赋值给temp.sort参数。