在开发课程表过程中遇到这样的需求,根据后端回显的数据,返回填充到对应的星期和节次中,就像这样:
那么在前端是如何实现的呢:
核心代码实现:
wc: String[] = new Array(); //将课程表存放到数组wc里
s: string; //学年学期
w: number; //星期
c: number; //节次
o: string; //单双周
//从dataservice解析url数据,并存放到课程表里
getData(semesterId:string,classId:string) {
let urls = "http://192.168.22.202:8080/teachingManagement-web/teachSecretariesCurriculumSchedule/queryScheduleByClass/";
urls = urls + semesterId +"/" + classId;
console.log(urls);
this.dataservice.getData(urls).then(res => {
console.log(res);
this.result = res.data;
for (var i = 0; i < this.result.length; i++) {
if(this.s == null)
{
this.s = this.result[i] ["semesterName"];
}
this.w = this.ConvertCtoN(this.result[i]["weekName"]);//解析课程表星期并赋值给w
this.c = this.ConvertCtoN(this.result[i]["cellTimeName"]); //解析节次并赋值给c
this.o = this.ConvertOtoS(this.result[i]["oddWeekOrNot"]); //解析单双周并赋值给o
let num:number = Number(this.w +"" +this.c);
this.wc[num] = this.result[i]["courseName"] + "\n" + this.result[i]["teacherName"] + "\n" + this.result[i]["startWeek"] + "-" + this.result[i]["endWeek"] + this.ConvertOtoS(this.result[i]["oddWeekOrNot"]) + "\n" + this.result[i]["roomName"]; //根据星期和节次进行坐标定位,并将课程表赋值给wc
}
}
)
}
ConvertCtoN(Name){
switch(Name){
case "第一节" : return 1;
case "第二节" : return 2;
case "第三节" : return 3;
case "第四节" : return 4;
case "第五节" : return 5;
case "星期一" : return 1;
case "星期二" : return 2;
case "星期三" : return 3;
case "星期四" : return 4;
case "星期五" : return 5;
}
}
ConvertOtoS(number){
switch(number){
case 0 : return "单";
case 1 : return "双";
case 2 : return "全";
}
}