开发一个考试系统——考试安排页面的数据表格和编辑框的实现

218 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第29天,点击查看活动详情

上一篇我们对考试安排的页面功能进行了设计,这一篇对设计的表格显示方式和基本的编辑按钮进行实现。

这个项目的链接是:https://github.com/Amor122/MyTest.git

我已经设置了公开权限,大家都可以访问,项目每天的进度基本上是和文章更新一致的,或者略快于文章,我也是边写边发的,有些代码在后续版本说不定就更改了。代码的字数意义不大,有需要的都可以去项目上直接看,这里我大都换成了图片。

一、     表格绘制与数据获取

表格数据的绘制方式和界面上援引人员管理界面的相同风格。直接复制这两个文件并进行修改。

数据获取方式和前端显示结果的方式是一样的,我们只需要重新提供一些新的数据接口就可以了。

  image.png

编辑按钮我们就增加一个数据接口来获取编辑的下拉框选项数据,因为这里不像人员编辑,下拉框都可以包含自己本来的值,所以这里的数据接口将几个下拉框的数据全部返回了。

image.png

时间输入框的值经过了特殊处理,在查询相关资料后发现只需要将我们在后端返回的时间函数调整为显示到分钟,并把中间的空格替换为T即可在这个开考时间的框里显示默认值。

image.png  

表格的原始数据是后台处理过的

  image.png

这是datetime-local形式的input元素值的默认形式。有了这个形式的值才可以被val方式赋值并显示出来

image.png

这一篇的实现主要是要注意时间输入框的值来源方式,明天为大家分享后续新增和修改框的提交功能实现。