項(xiàng)目鏈接：https://gitee.com/hyhe/cascade-selector.git
一笛质、項(xiàng)目介紹
適用地址選擇等多級選擇功能，demo支持六層捞蚂。
1妇押、效果圖展示
cascadeSelector.png
2、文件介紹
cascadeSelectorFile.png
二姓迅、選擇器調(diào)用示例
1敲霍、數(shù)據(jù)模擬
initData() {
this.datas = [
{ code: "1", name: "1", isSelected: true, selectIndex: 0, subModels: [
{ code: "1", name: "1", isSelected: true, selectIndex: 0, subModels: [
{ code: "1", name: "1", isSelected: true, selectIndex: 0, subModels: [
{ code: "1", name: "1", isSelected: true, selectIndex: 0, subModels: [
{ code: "1", name: "1", isSelected: true, selectIndex: 0, subModels: [
{ code: "1", name: "1", isSelected: true, selectIndex: 0, subModels: []}
]}
]}
]},
{
code: "2", name: "2", isSelected: false, selectIndex: 1, subModels: [
{ code: "2", name: "2", isSelected: false, selectIndex: 1, subModels: [
{ code: "2", name: "2", isSelected: false, selectIndex: 1, subModels: []}
]}
]
},
{
code: "3", name: "3", isSelected: false, selectIndex: 2, subModels: [
{
code: "3", name: "3", isSelected: false, selectIndex: 2, subModels: [
{ code: "3", name: "3", isSelected: false, selectIndex: 2, subModels: [
{ code: "3", name: "3", isSelected: false, selectIndex: 2, subModels: []}
]}
]
}
]
}
]},
]}
]
}
2、選擇器調(diào)用示例
Stack() {
Column(){
Text(JSON.stringify(this.selectDatas)).fontSize(26).fontColor(BlackColor).width("100%").height(50).textAlign(TextAlign.Center)
}.width("100%").height("100%").backgroundColor(OrangeColor).zIndex(1)
.onClick(() => {
this.alertZIndex = 99
})
BaseCascadeSelector({ models: this.datas, headerModels: this.selectDatas, alertZIndex: this.alertZIndex, listItemBuilder:(item: BaseCascadeSelectorModel, pageIndex: number, itemIndex: number, tapCallBack: () => void) => {this.setListItem(item, pageIndex, itemIndex, () => {
console.log("click")
tapCallBack()
})}, returnSelectDatasClosure: (selectDatas: BaseCascadeSelectorModel[]) => {
this.selectDatas = selectDatas
}}).zIndex(this.alertZIndex)
}
三丁存、BaseCascadeSelector選擇器介紹
1肩杈、根據(jù)頭部數(shù)據(jù)獲取當(dāng)前頁要展示的數(shù)據(jù)
getCurrentPageDatas(index: number): Array<BaseCascadeSelectorModel> {
if (index > this.headerModels.length) {
return []
}
if (index === 0) {
return this.models ?? []
} else if (index == 1) {
let selectIndex = this.headerModels[0].selectIndex ?? 0
return this.models[selectIndex].subModels
} else if (index == 2) {
let selectIndexFirst = this.headerModels[0].selectIndex ?? 0
let selectIndexSecond = this.headerModels[1].selectIndex ?? 0
return this.models[selectIndexFirst]?.subModels[selectIndexSecond].subModels
} else if (index == 3) {
let selectIndexFirst = this.headerModels[0].selectIndex ?? 0
let selectIndexSecond = this.headerModels[1].selectIndex ?? 0
let selectIndexThree = this.headerModels[2].selectIndex ?? 0
return this.models[selectIndexFirst].subModels[selectIndexSecond].subModels[selectIndexThree].subModels
} else if (index == 4) {
let selectIndexFirst = this.headerModels[0].selectIndex ?? 0
let selectIndexSecond = this.headerModels[1].selectIndex ?? 0
let selectIndexThree = this.headerModels[2].selectIndex ?? 0
let selectIndexFourth = this.headerModels[3].selectIndex ?? 0
return this.models[selectIndexFirst].subModels[selectIndexSecond].subModels[selectIndexThree].subModels[selectIndexFourth].subModels ?? []
} else if (index == 5) {
let selectIndexFirst = this.headerModels[0].selectIndex ?? 0
let selectIndexSecond = this.headerModels[1].selectIndex ?? 0
let selectIndexThree = this.headerModels[2].selectIndex ?? 0
let selectIndexFourth = this.headerModels[3].selectIndex ?? 0
let selectIndexFifth = this.headerModels[4].selectIndex ?? 0
return this.models[selectIndexFirst].subModels[selectIndexSecond].subModels[selectIndexThree].subModels[selectIndexFourth].subModels[selectIndexFifth].subModels ?? []
} else {
return []
}
}
2、列表某項(xiàng)選中后當(dāng)前頁數(shù)據(jù)
dealResult(pageIndex: number, itemIndex: number) {
let newModels: Array<BaseCascadeSelectorModel> = []
if (pageIndex == 0) {
newModels = this.models
} else if (pageIndex == 1) {
newModels = this.models[this.headerModels[0].selectIndex].subModels
} else if (pageIndex == 2) {
newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels
} else if (pageIndex == 3) {
newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels[this.headerModels[2].selectIndex].subModels
} else if (pageIndex == 4) {
newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels[this.headerModels[2].selectIndex].subModels[this.headerModels[3].selectIndex].subModels
} else {
newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels[this.headerModels[2].selectIndex].subModels[this.headerModels[3].selectIndex].subModels[this.headerModels[4].selectIndex].subModels
}
this.dealItemSelect(newModels, pageIndex, itemIndex)
}
3解寝、列表選中某項(xiàng)后扩然，header顯示數(shù)據(jù)和當(dāng)前頁及后續(xù)頁數(shù)據(jù)處理
dealItemSelect(newModels: Array<BaseCascadeSelectorModel>, pageIndex: number, itemIndex: number) {
let newSelectModels: BaseCascadeSelectorModel[] = this.headerModels.slice(0, pageIndex)
if (newModels.length == 0) {
newSelectModels = newSelectModels.slice(0, pageIndex)
this.headerModels = newSelectModels
} else {
newModels.forEach((model, index) => {
model.selectIndex = itemIndex
if (index == itemIndex) {
if (model.subModels.length > 0) {
this.currentPageIndex = pageIndex + 1
}
model.isSelected = true
newSelectModels[pageIndex] = model
} else {
model.isSelected = false
}
this.dealSubModels(model.subModels)
})
if (newModels[0].subModels.length > 0) {
let newModel = new BaseCascadeSelectorModel()
newModel.code = ""
newModel.isSelected = true
newModel.selectIndex = 0
newModel.name = "請選擇"
newSelectModels.push(newModel)
}
this.headerModels = newSelectModels
}
}
// 將后續(xù)數(shù)據(jù)重置為默認(rèn)值
dealSubModels(newModels: Array<BaseCascadeSelectorModel>) {
newModels.forEach((model, index) => {
model.isSelected = false
model.selectIndex = 0
this.dealSubModels(model.subModels)
})
}
4、頭部選中后數(shù)據(jù)處理
dealSelectData(pageIndex: number, itemIndex: number) {
let newModels: Array<BaseCascadeSelectorModel> = []
if (pageIndex == 0) {
newModels = this.models[this.headerModels[0].selectIndex].subModels
} else if (pageIndex == 1) {
newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels
} else if (pageIndex == 2) {
newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels[this.headerModels[2].selectIndex].subModels
} else if (pageIndex == 3) {
newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels[this.headerModels[2].selectIndex].subModels[this.headerModels[3].selectIndex].subModels
} else if (pageIndex == 4) {
newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels[this.headerModels[2].selectIndex].subModels[this.headerModels[3].selectIndex].subModels[this.headerModels[4].selectIndex].subModels
} else if (pageIndex == 5) {
newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels[this.headerModels[2].selectIndex].subModels[this.headerModels[3].selectIndex].subModels[this.headerModels[4].selectIndex].subModels[this.headerModels[5].selectIndex].subModels
} else {
newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels[this.headerModels[2].selectIndex].subModels[this.headerModels[3].selectIndex].subModels[this.headerModels[4].selectIndex].subModels[this.headerModels[5].selectIndex].subModels[this.headerModels[6].selectIndex].subModels
}
let newSelectModels: BaseCascadeSelectorModel[] = this.headerModels.slice(0, pageIndex)
if (newModels.length == 0) {
this.headerModels = newSelectModels
} else {
newModels.forEach((model, index) => {
if (index == itemIndex) {
model.isSelected = true
model.selectIndex = itemIndex
} else {
model.isSelected = false
}
this.dealSubModels(model.subModels)
})
let newModel = new BaseCascadeSelectorModel()
newModel.code = ""
newModel.isSelected = true
newModel.name = "請選擇"
newSelectModels[pageIndex] = newModel
this.headerModels = newSelectModels
}
}
