给定坐标（星期几、第几节）前端显示问题

任课教师或大学生课表并不是相同的，也不是满课的。后端返回给前端一个课程信息的列表，要求前端正确显示。

后端没有必要补齐空，凑一个完整的课表给前端，直接返回教师所有课程给前端。只要约定按节次排序或按星期排序就行了。

这里按节次排序。

import React from 'react';
import 'antd-mobile/dist/antd-mobile.css';
import style from './home.css';class CourseTable extends React.Component {constructor(props) {super(props);this.state = {courseInfos: [{}],tables: [[0, 0, 0, 0, 0],[0, 0, 0, 0, 0],[0, 0, 0, 0, 0],[0, 0, 0, 0, 0],[0, 0, 0, 0, 0],],};}componentDidMount() {console.log(this.state.tables);//有点蠢了，好像都不需要动用dom 去修改节点标签的值，直接根据请求接口返回的数据修改tables就行了// let course = document.getElementById('course');// console.log(course);// course.childNodes.forEach((item,index)=>{//   console.log(index,item);//   item.childNodes.forEach((item,index)=>{//     console.log(index,item);//     item.value = '语文';//   })// })//请求返回的数据必须要保证按节次排序//如此不就需要前端拼凑完整的数据给前端了嘛//假如这个是教师课表，一般来说一个老师只教一科，//这里换不同的科目，科目不同颜色不同，这不是很容易？？const data = [{ week: 1, segment: 1, course: '语文' },{ week: 2, segment: 1, course: '物理' },{ week: 2, segment: 2, course: '化学' },{ week: 5, segment: 2, course: '数学' },{ week: 4, segment: 4, course: '英语' },{ week: 3, segment: 5, course: '政治' },];let tables = this.state.tables;for (let i = 0; i < tables.length; i++) {for (let j = 0; j < 5; j++) {for (let k = 0; k < data.length; k++) {if (data[k].segment - 1 === i && data[k].week - 1 === j) {tables[i][j] = data[k].course;}if (tables[i][j] === 0) {tables[i][j] = '';}}}}//我好想并没有去setState，它的值就被改变了console.log(tables);}componentDidUpdate(prevState) {}render() {return (<div><div className={style['table-week']}><label>周一</label><label>周二</label><label>周三</label><label>周四</label><label>周五</label></div><div className={style['table-segment']}><label>1</label><label>2</label><label>3</label><label>4</label><label>5</label></div><div className={style.courseTable}>{this.state.tables.map((item, index) => (<div className={style.segment} key={index}>{item.map((item, index) => {switch (item) {case '语文':return (<labelstyle={{ backgroundColor: 'lightGreen' }}key={index}>{item}</label>);case '数学':return (<label style={{ backgroundColor: 'skyBlue' }} key={index}>{item}</label>);case '英语':return (<label style={{ backgroundColor: '#F66222' }} key={index}>{item}</label>);case '物理':return (<label style={{ backgroundColor: '#86CEA0' }} key={index}>{item}</label>);case '化学':return (<label style={{ backgroundColor: '#F7246C' }} key={index}>{item}</label>);case '政治':return (<label style={{ backgroundColor: '#24DEF7' }} key={index}>{item}</label>);case '':return <label key={index}>{item}</label>;}})}</div>))}</div><div className={style.courseTable}>{this.state.tables.map((item, index) => (<div className={style.segment} key={index}>{item.map((item, index) => {switch (item) {case '语文':return (<labelstyle={{ backgroundColor: 'lightGreen' }}key={index}>{item}</label>);case '数学':return (<label style={{ backgroundColor: 'skyBlue' }} key={index}>{item}</label>);case '英语':return (<label style={{ backgroundColor: '#F66222' }} key={index}>{item}</label>);case '物理':return (<label style={{ backgroundColor: '#86CEA0' }} key={index}>{item}</label>);case '化学':return (<label style={{ backgroundColor: '#F7246C' }} key={index}>{item}</label>);case '政治':return (<label style={{ backgroundColor: '#24DEF7' }} key={index}>{item}</label>);case '':return <label key={index}>{item}</label>;}})}</div>))}</div></div>);}
}export default CourseTable;

/**
课程表*/.courseTable{width:90%;border: solid 0 skyblue;border-left: 0 none;border-right: 0 none;padding: 0;margin: 2px 2px 40px 25px
}.table-week{width:100%;padding: 0;margin: 2px 2px 10px 25px
}.table-week label{display: inline-block;width: 58px;text-align: center;margin: 0 5px -14px 0;
}.table-segment{width: 6%;height: 420px ;float: left;text-align: center;margin-right: 2px;background-color: #E5E5E5;
}.table-segment label{width: 20px;height: 38px ;display: inline-block;padding: 9px 5px;
}.courseTable .segment{width:100%;height: 38px;border-top: dashed 1px skyblue;border-left: 0 none;border-right: 0 none;
}.courseTable .segment label{width: 58px;height: 36px;display: inline-block;padding:7px 5px;color: white;border-radius: 6px;text-align: center;margin: 0 5px -14px 0;
}

给定坐标（星期几、第几节）前端显示问题相关推荐

小唐开始学 Spring Boot——（5）前端显示集成
文章目录一.创建前端显示类二.判断类三.改写Service层四.效果上一节,我们说到,我们已经可以将我们数据库里面的内容,通过我们的mybatis去映射到我们的前端这个时候,细心的同学就会 ...
将您的窗口最前端显示
很多时候,我们用电脑同时并非只做一件事,像我就经常一边看视频,一边看网上的其它一些信息或者整理电脑上的东西之类的.只要这两者不是十分冲突的就行.以前都用KMPlayer看视频,它本身提供有前端显示的功 ...
建站四部曲之前端显示篇（React+上线）
本系列分为四篇: 建站四部曲之后端接口篇(SpringBoot+上线) 建站四部曲之Python数据爬虫篇(selenium) 建站四部曲之前端显示篇(React+上线) 建站四部曲之移动端篇(And ...
asp.net(c#)两时间段每天是星期几,周几(时间段日历显示)的问题解
asp.net(c#)两时间段每天是星期几,周几(时间段日历显示)的问题解决 string temp="<table width=\"560\" cellpad ...
解决SQL Server 2005数据库中datetime时间字段在前端显示时分秒的问题
SQL Server 2005中时间类型datetime的格式是"年月日时分秒",直接读出来该字段,为了不让它在前端显示"时分秒"若是显示在dataGridVi ...
MFC让窗口最前端显示
基于对话框的MFC应用程序,环境:Win XP + VC2010.程序界面: 接着为IDC_CHECK1绑定一个BOOL类型的变量m_bShowTopmost,并添加BN_CLICKED事件响应函数: ...
关于ArcGIS动态图层空间内栅格数据，JS前端显示颜色不正确的解决方案
关于ArcGIS动态图层空间内栅格数据,JS前端显示颜色不正确的解决方案参考文章: (1)关于ArcGIS动态图层空间内栅格数据,JS前端显示颜色不正确的解决方案 (2)https://www.cn ...
前端显示文本时的格式设置
有时,前端页面文字内容需要按照我们输入的格式显示,比如,我们输入换行.空格,这些在文字显示时都需要显示出来.这里有一个较为简单的解决方式前端显示界面: 代码: <div class=" ...
echarts 时间曲线图_web前端显示设备实时温度，ECharts实现温度折线图，实时动态温度曲线图生成...
web前端显示设备实时温度, 具体步骤如下: 1.在页面中引入ECharts文件echarts-all.js 2.在body中为ECharts准备一个具备大小(宽高)的Dom 3.具体JS代码如下: ...
如何在前端显示后端返回的图片流（以Vue为例）
我们在前端显示图片一般用法是这样的 <template><el-carousel :interval="4000" type="card" h ...

给定坐标（星期几、第几节）前端显示问题

给定坐标（星期几、第几节）前端显示问题相关推荐

最新文章

热门文章