项目链接：https://gitee.com/hyhe/cascade-selector.git
一、项目介绍
适用地址选择等多级选择功能，demo支持六层。
1、效果图展示
cascadeSelector.png
2、文件介绍
cascadeSelectorFile.png
二、选择器调用示例
1、数据模拟
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、选择器调用示例
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、根据头部数据获取当前页要展示的数据
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、列表某项选中后当前页数据
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、列表选中某项后，header显示数据和当前页及后续页数据处理
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
}
}
// 将后续数据重置为默认值
dealSubModels(newModels: Array<BaseCascadeSelectorModel>) {
newModels.forEach((model, index) => {
model.isSelected = false
model.selectIndex = 0
this.dealSubModels(model.subModels)
})
}
4、头部选中后数据处理
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
}
}
