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

最新推荐文章于 2024-06-08 12:52:46 发布

AnalogElectronic

最新推荐文章于 2024-06-08 12:52:46 发布

阅读量175

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/AnalogElectronic/article/details/116504121

版权

前端专栏收录该内容

61 篇文章 3 订阅

订阅专栏

该博客介绍了如何使用React.js来展示教师课表，根据后端返回的按节次排序的课程信息，动态渲染并填充表格。通过条件渲染和样式设置，实现了不同科目以不同颜色区分，同时展示了如何处理空值，使得课表清晰易读。

摘要由CSDN通过智能技术生成

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

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

这里按节次排序。
在这里插入图片描述

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 (
                      <label
                        style={{ 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 (
                      <label
                        style={{ 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;
}