Bootstrap Table表格点击箭头升序降序

2023-10-04 08:15:55 浏览数 (3)

需求: 点击电池电量的箭头,按照升序降序排列

点击时间的箭头 按照升序降序排列

逻辑: 电量排序在 /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参数。

1 人点赞