微信小程式開發(4)——列表選擇、全選
阿新 • • 發佈:2018-12-11
產品需求小程式選擇部分或全部記錄並匯出,因此開發選擇記錄功能
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 }) },