如何用JavaScripte和HTML 实现一整套的考试答题卡和成绩表

Posted 2022-12-19 葡萄城技术团队

相信在学校的你都有这样的体验，临近考试，要疯狂的“背诵”否则成绩单就要挂零，因为答题卡全部涂抹都是错的。
那么毕业多年的你，没有了考试，有没有一丝怀念涂答题卡的时候，有没有好奇这个答题卡到底如何制作，成绩表到底如何为每位同学定制动态生成的。
这些都要归功于“报表”工具
学校每年都会打印很多的学生成绩单，往往因为新增的课程和不同的教学体系，导致想要的结果复杂且多变的。那么如何使用一个工具就可以灵活的制作各种各样报表，面对多变的场景

上图就是我们制作出来的一个答题卡报表，而且它可以根据学生数量批量加载学生的信息数据，然后直接生成并且供我们打印。那他的优势也就显而易见了，自己设计的答题卡，题型和题量都可以自己来选择，灵活多变，且可以根据不同题型自己随意更新。也可以增加很多默认数据，毕竟自己设计打印的肯定也比购买的便宜嘛。
自己制作报表困难嘛？
有些人可能就想说，自己做是不是很麻烦，而且也不会用，学起来是不是还很吃力。小编就可以自信的说了，作为手残党的我也可以很快制作的，但是上限却很高，越发深入的使用，带来的肯定也是越多的经验，当你制作多了后，还可以关注更多的功能，不仅仅是制作显示出来，更好看的更多功能的才是我们的追求。
就比如下面这个报表，只需要简单的几步就可以实现。而且效果还不错。

实战开始

首先我们要设计对应的报表，下面是报表设计的整体界面：

在左侧是我们需要使用的组件，也就是设计报表需要的元素，中间就是显示，最右侧可以控制一些属性设置和指定数据。这么一看就很清晰了，我们其实简单的拖拽就可以实现所需要的报表设计，简单方便，设计好之后可以导出下载都可以。光说这些肯定还是不够的，那么接下来就直接上实例：

毕业信息表

当我们统计学校不同学院的毕业信息时，可能需要根据从系统中查到数据然后拿出来，之后在自己计算所需要的数据，然后在在Excel表中一点一点的去写，特别时数据多点，我们的工作人员可能就会因为一张表而制作一整天。毕竟制作Excel表的痛苦大家应该都知道吧，那用wyn产品怎么实现的，手残党福利来了：
只需要简单的绑定需要的数据，然后把要显示的直接拖到页面上，然后写几个表达式。完成，可能本来一天的工作量，现在几个小时就OK了，是不是很诱惑啊。可以看下面两个图，第一个是设计界面，第二个是预览成果。

没错，就是简单的绑定这么几列数据，然后他就会根据我们数据源有的数据进行自动计算，自动扩展行展示。是不是很简单。

答题卡

那么答题卡的样子上面大家已经看到了，那有人问了，我们学生人很多啊，我不可能真的一个一个设计吧，就算只是一直复制粘贴，也很费时间。那在怎么解决呢，很简单这里只要绑定好数据的话，设置按人的分组，那他就会自动加载所有学生的了，而且对应的信息也对对应过来，这个时候我们打印就可以批量打印，并且不同学生显示不同信息。这种场景其实也可以应用在很多场景下，比如打印学生的准考证，学生的成绩单等等，其实都是需要批量打印的，那用这个产品就可以实现相同模板的批量打印。

学生成绩单

除了教师使用的，当然也有学生使用的啦，就比如我们最常见的成绩单
那么针对不同学生我们需要的是不同的成绩单，那这里就有个需求就是不同学生看不同的信息，自己查询自己的成绩单，自己打印自己的成绩单，那其实就像当于一个筛选嘛，那针对多变且不同的课程，往往很复杂。不同学生不同信息，那这个时候又是头疼的时候，那么使用wyn产品的就可以设计统一的样式，然后我们通过参数筛选，筛选出来自己的信息，比如我们通过学号查询自己的成绩单，就可以实现如下图：

项目实战

接下来给大家来点干货分享，如何使用前端报表控件ARJS通过拖拉拽实现大学成绩绩效表的设计。
1、首先我们来解析下这张报表
该表主要分为三个部分:
表头：也是就是学生基础信息，包括学习：姓名、学院、专业、学号、班级、学历、毕业证号

明细部分：显示大学四年的考试绩效成绩，包含学期、课程名称、学分、成绩
明细部分你自己看发现其实是三个相同的模块

表尾部分：表尾部分主要是学分的统计、平均成绩、平均绩点

2、 拆分完这张表之后，那么就可以根据实际需求进行报表的设计
首先给报表添加页眉和页脚，页眉中通过文本框来设置表头需要显示的信息表头和页脚通过文本框来进行表尾的显示设计
中间内容区域，首先使用表格控件，然后利用表格控件的分组，分组条件根据绑定数据的中的数据字段学年和学期进行分组，

明细内容是三个相同的模块，也就是在一个内容区域显三个相同区域。那么这可以使用报表字段的分栏属性来设置，

3、 最终设计好的报表设计样式

4、 最终预览结果：

5、 报表模板

相信能看到这里的小伙伴肯定也已经跃跃欲试了，这里我们为大家提供了多模板可以尝试。

模板下载：
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=152591&extra=page%3D1