djdg626的博客

小程序表格排序前端组件-后端排序方案

发布于：
htmljscss微信小程序

#前情提要

公司项目的原生小程序需要使用自定义表格组件，我使用了mmmml-zhao/table_component: 自定义table组件 (github.com)的表格组件，但是其中不包括表格排序的实现，于是自己简单实现一下。

#伪代码

plain
<MyTable [要排序的key1, 要排序的key2] 监听自定义表格的事件（接受key和type） />
实现的效果
自定义表格排序

#上下箭头css

用了自定义属性选择器来给正确的箭头改变颜色
css
.table-header .tr .th.sortable {
  display: flex;
  align-items: center;
}
.table-header .tr .th.sortable .arrows {
  display: flex;
  flex-direction: column;
  margin-left: 2rpx;
}
.table-header .tr .th.sortable .arrows .arrow {
  display: inline-block;
  margin: 2rpx 0;
  width: 0;
  height: 0;
  border-left: 3px solid rgba(0, 0, 0, 0);
  border-right: 3px solid rgba(0, 0, 0, 0);
}
.table-header .tr .th.sortable .arrows .arrow.up {
  border-bottom: 5px solid #000;
}
.table-header .tr .th.sortable .arrows .arrow.down {
  border-top: 5px solid #000;
}
.table-header .tr .th.sortable[data-sort="ascending"] .arrow {
  border-bottom-color: #3877f5 !important;
}
.table-header .tr .th.sortable[data-sort="descending"] .arrow {
  border-top-color: #3877f5 !important;
}

#html

使用wxs是因为在{{}}中使用includes不知道为什么不生效
html
<wxs module="utils">var isInclude = function(arr, value) {return arr.indexOf(value) !== -1};module.exports={isInclude: isInclude}</wxs>
<view class="inline-block">
  <view class="tr tr-th">
    <view class="th select" wx:if="{{select}}"></view>
    <view
      class="{{utils.isInclude(sortedKeys, item.key) ? 'sortable th' : 'th'}}"
      data-sort="{{item.key === sortedKey ? sort : ''}}"
      data-key="{{item.key}}"
      style="width:{{table.computedTdWidth(columns,item, select,scrollX)}};{{index===columns.length-1?'flex-grow:1;flex-shrink:1':''}}"
      wx:for="{{columns}}"
      wx:key="key"
      bind:tap="triggerThSort"
    >
      {{item.title}}
      <view class="arrows">
        <span class="arrow up"></span>
        <span class="arrow down"></span>
      </view>
    </view>
  </view>
</view>

#js

  1. 第五行如果点击的列key在传入的sortedKeys中才继续
  2. 第七行，不是连续点击排序列，使用descending降序
  3. 16行，连续点击，根据descending,ascending,不排序依次传递
  4. 12,18行，发送自定义事件，传递排序的key和sort
  5. 外部接收参数发送请求，修改表格数据即可
js
function triggerThSort(e) {
  const data = e.currentTarget.dataset;
  if (
    this.data.sortedKeys.length > 0 &&
    this.data.sortedKeys.includes(data.key)
  ) {
    if (data.key !== this.data.sortedKey) {
      this.setData({
        sortedKey: data.key,
        sort: "descending",
      });
      this.triggerEvent("sortaction", {
        key: data.key,
        type: "descending",
      });
    } else {
      let newSort = "";
      if (data.sort === "") {
        newSort = "descending";
      } else if (data.sort === "descending") {
        newSort = "ascending";
      } else {
        newSort = "";
      }
      this.setData({
        sort: newSort,
      });
      this.triggerEvent("sortaction", {
        type: newSort,
        key: data.key,
      });
    }
  }
}

#代码仓库

github仓库 原仓库