微信小程序开发(4)——列表选择、全选

产品需求小程序选择部分或全部记录并导出，因此开发选择记录功能

1.初始化记录数据

有多种请求数据的方式，如初始化刷新数据、上拉加载、下拉刷新、搜索记录这四种请求数据的方式。

data: {
    records: [],
    recordsAll: [],
    selectRecordsId: [],
    isAllSelect: false,
    selectLength: 0,
    currentPage: 0,
  },
getRecords: function(data, type) {
    var that = this;
    app.showLoading('正在加载');
    app.requestData({
      url: 'operationsrecord/query',
      data: data,
      success: function(res) {
        console.log(data,type,res);
        wx.stopPullDownRefresh();
        if (res.data.success) {
          var rows = res.data.rs.rows;
          console.log(rows.length);
          let recordsNew = [];
          let len = rows.length;
          if (len > 0) {
            for (let i = 0; i < len; i++) {
              recordsNew.push({
                isSelect: false, // 每条记录默认没有选中
                id: rows[i].id,
                deviceName: rows[i].deviceName,
                deviceCode: rows[i].deviceCode,
                time: rows[i].createdDate
              });
            }
          }
          let isAllLoad = "上拉加载";
          if (recordsNew.length < 20) {
            isAllLoad = "已加载完所有数据";
          }
          if (type == 'load') {
            if (data.id == 0) { // 初始加载，刷新
              if (recordsNew.length > 0){
                that.setData({
                  records: recordsNew,
                  recordsAll: rows,
                  currentPage: rows[len - 1].id,
                  lastDataLen: recordsNew.length,
                  isAllLoad: isAllLoad
                });
              }else{
                console.log("加载完", isAllLoad);
                that.setData({
                  lastDataLen: recordsNew.length,
                  isAllLoad: isAllLoad
                })
              }
            } else { // 上拉加载
              if (recordsNew.length > 0) {
                that.setData({
                  records: that.data.records.concat(recordsNew),
                  recordsAll: that.data.recordsAll.concat(rows),
                  currentPage: rows[len - 1].id,
                  lastDataLen: recordsNew.length,
                  isAllLoad: isAllLoad
                });
              }else{
                that.setData({
                  lastDataLen: recordsNew.length,
                  isAllLoad: isAllLoad
                });
              }
            }
          } else { // 搜索
            that.setData({
              records: recordsNew,
              recordsAll: data,
              currentPage: 0,
              lastDataLen: 0,
              isAllLoad: isAllLoad
            });
          }
        } else {
          app.showErr('出错', res.data.message);
        }
      },
      error: function(res) {
        console.log(res);
      }
    })
  },

2.选中/取消选中部分数据

其中需要注意只修改数组中某一数据的属性值不需要使用遍历修改。

switchSelect: function(e) {
    // 获取item项的id，和数组的下标值  
    let k = this.data.selectLength;
    let selectRecordsId = this.data.selectRecordsId;
    let index = parseInt(e.target.dataset.index);
    if (!this.data.records[index].isSelect) { // 选中
      k = k + 1;
      selectRecordsId.push(this.data.records[index].id);
    } else {
      k = k - 1;
      let indexId = selectRecordsId.indexOf(this.data.records[index].id);
      selectRecordsId.splice(indexId, 1);
    }
    this.data.records[index].isSelect = !this.data.records[index].isSelect;

    //是否全选判断
    if (k == this.data.records.length) {
      this.data.isAllSelect = true;
    } else {
      this.data.isAllSelect = false;
    }
    // 只修改数组中某一个数据的属性值
    let record = 'records[' + index + '].isSelect';
    this.setData({
      [record]: this.data.records[index].isSelect,
      isAllSelect: this.data.isAllSelect,
      selectLength: k,
      selectRecordsId: selectRecordsId
    });
  },

3.全选/取消全选

需要遍历循环修改数组中每个数据的属性值，这样的效率并不好，如果数据量大的话很难受，但是我没有更好的方式了。

selectAll: function() {
    this.data.isAllSelect = !this.data.isAllSelect;
    var selectRecordsId = [];
    if (this.data.isAllSelect) {
      for (let i = 0; i < this.data.records.length; i++) {
        this.data.records[i].isSelect = true;
        selectRecordsId.push(this.data.records[i].id)
      }
      this.data.selectLength = this.data.records.length;
    } else {
      for (let i = 0; i < this.data.records.length; i++) {
        this.data.records[i].isSelect = false;
      }
      this.data.selectLength = 0;
      selectRecordsId = [];
    }
    this.setData({
      records: this.data.records,
      selectRecordsId: selectRecordsId,
      isAllSelect: this.data.isAllSelect,
      selectLength: this.data.selectLength
    })
  },