demo：用户在选择联系人页面可多选或者单选联系人进行消息的转发
效果图：
类似于钉钉提交日志选择部门
代码：
首先创建已定义组件用来展示最外层数据
ionic g componets bmtree
在新建一个页面后来展示内层的数据用组件也可以
ionic g page demo
创建完成后再需要调用的地方写跳转方法
let SecondPage=this.model.create(BmtreesPage);
SecondPage.onDidDismiss(data => {
this.rytrees=this.qh.selectHobby;
});
SecondPage.present();
注意我这里使用的是model跳转，需要注入相关服务SecondPage.onDidDismiss是用来用户在选择完成后关闭model传递传中的值 this.qh.selectHobby就是选中的值
这里的qh是自定义的providers 用来实现CheckBox单选，多选，取消等业务逻辑 需要注入
bmtree.ts
let SecondPage=this.model.create(HqjtryPage,{rylist:event});
SecondPage.present();
跳转到用来展示数据的页面 这里的rylist就是内层页面的数据
类似图三
然后是最繁琐的部分创建，判断CheckBox的providers
ionic g providers checkbox
checkbox.ts代码
public selectHobby:Array =[];//存储CheckBox值
constructor(public http:HttpClient) {
console.log('Hello QhcheckboxProvider Provider');
}
//实现check选中取消的逻辑
selectCheckbox(check:boolean,value:string,id:string) {
var index:number =this.selectHobby1.indexOf(id);
console.log(check);
if (check) {
if (index <0) {
this.selectHobby.push(value);
}
}else {
if (index > -1) {
this.selectHobby.splice(index,1);
}
}
}
然后再bmtree的页面进行调用
(click)="this.qh.selectCheckbox(cv.checked)" #cv [checked]="selectedAll"
[checked]="selectedAll" 是用来实现全选或者全不选 selectedAll默认是boolean
我实现全选或者全不选是通过button来实现的
back1(i){
if(this.selectedAll ==true){
this.selectedAll=false;
this.qh.selectHobby.splice(i,1); //移除所有数据
}else{
this.selectedAll=true;
for(let items of this.tree){
this.qh.selectCheckbox( this.selectedAll);
}
}
}
这样就可以实现了,之前在做的时候 由于调用这个组件的地方比较多，同一个list来存放CheckBox数据的 话就会造成选择数据不对的情况，所以新的页面调用时创建一个新的list就可以了
贴上在div中移除dom的代码
(click)="slide.remove(this.ryyhdhs.splice(i,1),this.rytrees.splice(i,1))" #slide
在div对应的ts文件中注入
@ViewChildren('slide') slides:QueryList;
由于隔得时间比较久了可能会遗漏如果有疑问可以留言
网友评论