前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Bootstrap Table表格点击箭头升序降序

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

作者头像
王小婷
发布2023-10-04 08:15:55
2340
发布2023-10-04 08:15:55
举报
文章被收录于专栏:编程微刊编程微刊

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

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

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档