前言
小编最近做手机端项目时,遇到了显示层级结构的业务需求,在手机端使用箭头图标加上层级数据判断,即可实现,在这个实现过程中,需要确认每次点击的数据箭头索引,调用修改ts文件中的变量值,在调用后端变量时,需要在HTML页面拼接变量名,但这种方法不能奏效,最终通过大神的指引,明白了前端的集合、数据获取指定索引位置的元素的方法使用。
效果图
层级结构实现
一、HTML代码
<ion-item-group>
<div style="border-radius: 8px; font-size: 18px;margin-top:3% ;padding-top:5%;width:95% ">
<div *ngIf="isShowOne" >
<ion-list *ngFor="let twoDepart of oneDepartInfo.children;let i=index;">
<ion-item *ngIf="twoDepart.children!=undefined">
<div style="padding-left:4%" *ngIf="isShowAll[i] === 'hide'" (click)="isShowI(i,'show')">{{twoDepart.name}}</div>
<div style="padding-left:4%" *ngIf="isShowAll[i] === 'show'" (click)="isShowI(i,'hide')">{{twoDepart.name}}</div>
<ion-icon style="float:right;" slot="end" name="ios-arrow-down" *ngIf="isShowAll[i] === 'show'" (click)="isShowI(i,'hide')"></ion-icon>
<ion-icon style="float:right;" slot="end" name="ios-arrow-forward" *ngIf="isShowAll[i] === 'hide'" (click)="isShowI(i,'show')"></ion-icon>
</ion-item>
<div *ngIf="isShowAll[i]=='show'" style="margin-top:5%;padding-left:10%;padding-right:5%;">
<ion-list *ngFor="let threeDepart of twoDepart.children">
<div>
<ion-item (click)="gotoDepartPeo(uId,uName)">
<span #uId style="display: none">{{threeDepart.id}}</span>
<span #uName>{{threeDepart.name}}</span>
</ion-item>
</div>
</ion-list>
</div>
<ion-item *ngIf="twoDepart.children == undefined" (click)="gotoDepartPeo(uId,uName)">
<span #uId style="display: none">{{twoDepart.id}}</span>
<span #uName style="padding-left:4%">{{twoDepart.name}}</span>
</ion-item>
</ion-list>
</div>
</div>
</ion-item-group>
二、代码逻辑分析
1.层级结构判断
如果有子级内容,则显示子级目录;否则直接跳转到人员页面。
<ion-item *ngIf="twoDepart.children == undefined" (click)="gotoDepartPeo(uId,uName)">
<span #uId style="display: none">{{twoDepart.id}}</span>
<span #uName style="padding-left:4%">{{twoDepart.name}}</span>
</ion-item>
2.点击机构名称或箭头,显示隐藏子级内容
通过isShowAll数组变量判断是否点击具体的元素
<div style="padding-left:4%" *ngIf="isShowAll[i] === 'hide'" (click)="isShowI(i,'show')">{{twoDepart.name}}</div>
<div style="padding-left:4%" *ngIf="isShowAll[i] === 'show'" (click)="isShowI(i,'hide')">{{twoDepart.name}}</div>
<ion-icon style="float:right;" slot="end" name="ios-arrow-down" *ngIf="isShowAll[i] === 'show'" (click)="isShowI(i,'hide')"></ion-icon>
<ion-icon style="float:right;" slot="end" name="ios-arrow-forward" *ngIf="isShowAll[i] === 'hide'" (click)="isShowI(i,'show')"></ion-icon>
三、ts变量定义与调用后端接口思路
1.通过后端查询出所有的人员组织机构的树级目录
思路出炉的过程:
(1)目前这个思路,只调用一次便可查询出所有的组织结构信息,是我们项目组的大神告诉我的思路。
(2)之前我的想法是每一个父级结构点击时去调用查询子级目录的接口,这样判断逻辑复杂,请求后端的次数也多,比较不成熟。
this.http.get(dataUrl).subscribe(
res => {
this.Department = res.json();
if (this.Department.length > 0) {
this.oneDepartInfo.children = this.Department[0].children;
this.oneDepartInfo.name = this.Department[0].name;
this.oneDepartInfo.id = this.Department[0].id;
this.oneDepartInfo.pid = this.Department[0].pid;
} else {
super.showToast(this.toastCtrl, '抱歉出错啦,请反馈给积分项目组吧!');
}
2.数组变量isShowAll定义
数组的使用,获取具体索引的变量 isShowAll[0];
之前的思路:定义isShow0、isShow2,HTML去拼接字符串,奈何无法通过*ngIf="‘isShow’+i"拼接出来,却可以通过{{‘isShow’+i}}差值表达式拼接出来,解决无果,便采用了上面数组的方法,这个方法是前端大神指引我,实现的。非常感谢我的大神师父。
// 数组变量的声明
isShowAll = [
'hide',
'hide',
'hide',
'hide',
'hide',
'hide',
'hide',
'hide',
'hide',
'hide'
];
/**
* 是否显示子级结构
* @param isShow
* @author 冯浩月
* @since 2019年3月1日16:45:37
*/
isShowI(i: any, isShow: any) {
switch (i) {
case 0:
this.isShowAll[0] = isShow;
break;
case 1:
this.isShowAll[1] = isShow;
break;
case 2:
this.isShowAll[2] = isShow;
break;
case 3:
this.isShowAll[3] = isShow;
break;
case 4:
this.isShowAll[4] = isShow;
break;
case 5:
this.isShowAll[5] = isShow;
break;
case 6:
this.isShowAll[6] = isShow;
break;
case 7:
this.isShowAll[7] = isShow;
break;
case 8:
this.isShowAll[8] = isShow;
break;
case 9:
this.isShowAll[9] = isShow;
break;
}
}
小结
做项目的过程中,也是不同思路碰撞的过程,做得多了,自然会有经验,同时基础知识也是必不可少,例如前端数组利用索引取值的方法,很基础,却没有想起来。总归来说是一些经验,分享给大家,希望对你们有所帮助!
感谢您的访问!