前言
本示例主要介紹多重篩選場景，利用數組方法過濾滿足條件的數據，利用LazyForEach實現列表信息的渲染以及刷新。
效果圖預覽
使用説明
- 等待列表數據全部加載完成後，點擊篩選類型，展開篩選數據。
- 選中想要篩選的數據，點擊確認，列表刷新。
- 再次點開篩選類型，保留上次篩選的內容，點擊重置篩選內容復原，列表數據恢復為未篩選前的數據。
實現思路
本例涉及的關鍵特性和實現方案如下：
使用Grid實現篩選條件佈局。
Grid() {
ForEach(this.item.options, (options: string, idx: number) => {
GridItem() {
Text(options)
.textAlign(TextAlign.Center)
.fontSize(16)
.height(40)
.width('100%')
}
...
})
}
.columnsTemplate('1fr 1fr 1fr')
.rowsGap(16)
.columnsGap(16)
.margin({
left: 16,
right: 6,
top: 8,
bottom: 8
})
.layoutDirection(GridDirection.Row)
.constraintSize({
minHeight: '15%',
maxHeight: '15%'// grid會撐滿maxHeight，先限定死高度
})- 使用數組方法對篩選數據進行過濾，得到篩選數據。
GridItem() {
Text(options)
.textAlign(TextAlign.Center)
.fontSize(16)
.height(40)
.width('100%')
}
.onClick(() => {
if (this.item.selectItem.includes(idx)) {
let index = this.item.selectItem.indexOf(idx);
let listIdx = this.changData.indexOf(options);
// 刪除已存在的篩選數據的index值
this.item.selectItem.splice(index, 1);
// 過濾出來沒有重複數據的篩選值
this.changData = this.changData.filter(i => i !== options);
this.selectArr = this.item.selectItem;
// 刪除已選擇的數據的行數index數組
this.arrayListData.splice(listIdx, 1);
} else {
// 添加篩選數據的index值
this.item.selectItem.push(idx);
// 添加選中的數據
this.changData.push(options);
this.selectArr = this.item.selectItem;
// 添加選擇的數據的行數index數組
this.arrayListData.push(this.listIndex);
}
})- 得到篩選的數據後根據點擊的篩選數據行數，使用has進行if判斷看是否滿足多重篩選的條件。
Button('確認')
.height(40)
.width(150)
.backgroundColor(Color.White)
.fontColor('#333')
.onClick(() => {
this.isShow = false;
let arrayListData = new Set(this.arrayListData)
if (arrayListData.has(0) && !arrayListData.has(1)) {
// 僅選擇停放時間
this.siteList.timeMultiFilter(this.changData);
} else if (!arrayListData.has(0) && arrayListData.has(1)) {
// 僅選擇套餐類型
this.siteList.typeMultiFilter(this.changData);
} else if (!arrayListData.has(0) && !arrayListData.has(1) && arrayListData.has(2)) {
// 僅選擇充電
this.siteList.getInitalList();
} else if (this.changData.length === 0) {
// 未對數據進行選擇
this.siteList.getInitalList();
} else {
// 多重篩選
this.siteList.multiFilter(this.changData);
}
if (this.siteList.totalCount() === 0) {
this.siteList.getInitalList();
promptAction.showToast({ message: "未找到相關數據" });
}
})- 使用filter過濾出來符合條件的數據，篩選出來的數組構建一個新的Set，使用Set中的has判斷列表中相關數據是否存在。
public multiFilter(changData: Array<string>) {
let siteListString: string | undefined = AppStorage.get('siteList')
if (siteListString) {
let siteListObject: SiteListDataSource | undefined = JSON.parse(siteListString)
if (siteListObject === undefined) {
return
}
this.initialSiteList = siteListObject.dataList
this.dataList = []
this.dataList = this.initialSiteList
// 篩選數據
let changDataSet = new Set(changData)
let dataList: SiteItem[] = this.dataList.filter(item => {
item.siteBale = item.siteBale.filter(item => {
if ((item.time && item.type) && (changDataSet.has(item.time)) && (changDataSet.has(item.type))) {
return item
}
return
})
return item.siteBale
})
dataList = dataList.filter(item => item.siteBale.length !== 0);
this.dataList = [];
this.dataList = dataList;
this.notifyDataReload();
}
}- 使用深拷貝保留原數據。
/**
* 返回原數組
*/
public getInitalList() {
let siteListString: string | undefined = AppStorage.get('siteList');
if (siteListString) {
let siteListObject: SiteListDataSource | undefined = JSON.parse(siteListString);
if (siteListObject === undefined) {
return;
}
this.initialSiteList = siteListObject.dataList;
this.dataList = [];
this.dataList = this.initialSiteList;
this.notifyDataReload();
}
}
