1. 程式人生 > >微信小程式開發(4)——列表選擇、全選

微信小程式開發(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
    })
  },