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

如何,javascripte,html,实现,一整套,考试,答题卡,成绩表 · 浏览次数 : 5380

小编点评

**答题卡报表的设计** **组件设计** - 左侧:组件面板,包含选项卡、数据来源选择器、报表调整器等。 - 中间:显示区域,用于显示报表数据。 - 右侧:设置区域,用于控制报表属性,如标题、格式等。 **实例** **设计界面** [设计界面图] **预览成果** [预览成果图]

正文

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

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

实战开始

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

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

毕业信息表

当我们统计学校不同学院的毕业信息时,可能需要根据从系统中查到数据然后拿出来,之后在自己计算所需要的数据,然后在在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

与如何用JavaScripte和HTML 实现一整套的考试答题卡和成绩表 相似的内容:

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

相信在学校的你都有这样的体验,临近考试,要疯狂的“背诵”否则成绩单就要挂零,因为答题卡全部涂抹都是错的。 那么毕业多年的你,没有了考试,有没有一丝怀念涂答题卡的时候,有没有好奇这个答题卡到底如何制作,成绩表到底如何为每位同学定制动态生成的。 这些都要归功于“报表”工具 学校每年都会打印很多的学生成绩

从零开始使用 Astro 的实用指南

在这个实用的Astro指南中,我将指导你完成设置过程,并告诉你如何构造你的文件。你将学习如何添加页面、交互式组件,甚至是markdown文章。我还会告诉你如何从服务器上获取数据,创建布局,并使用vanilla JavaScript和其他框架添加互动性。准备好享受一些动手的乐趣,因为我们将一起创建一个

实用教程丨如何将实时数据显示在前端电子表格中(一)

本文由葡萄城技术团队于博客园原创并首发转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 前言 数据(包括股票、天气和体育比分)在不断更新为新信息时最为有用。比较通用的 JavaScript 电子表格组件,可以轻松地使用、显示并通过数据绑定提供实时数据更新。

Flask框架:如何运用Ajax轮询动态绘图

摘要:Ajax是异步JavaScript和XML可用于前后端交互。 本文分享自华为云社区《Flask框架:运用Ajax轮询动态绘图》,作者:LyShark。 Ajax是异步JavaScript和XML可用于前后端交互,在之前《Flask 框架:运用Ajax实现数据交互》简单实现了前后端交互,本章将通

揭秘报表新玩法!标配插件不再单调,如何用柱形图插件让你的报表瞬间高大上!

> 摘要:本文由葡萄城技术团队于博客园原创并首发。葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 # 前言 图表作为一款用于可视化数据的工具,可以帮助我们更好的分析和理解数据,并发现数据之间的关系和趋势。下面以柱形图为例介绍如何使用JavaScript在报表中引入图表。 本文使用软件

async/await初学者指南

> JavaScript中的`async`和`await`关键字提供了一种现代语法,帮助我们处理异步操作。在本教程中,我们将深入研究如何使用`async/await`来掌控JavaScript程序中的流程控制。 > ## 总览 - 如何创建JavaScript异步函数 - async关键字 - aw

如何使用Map处理Dom节点

本文浅析一下为什么`Map`(和WeakMap)在处理大量DOM节点时特别有用。 我们在JavaScript中使用了很多普通的、古老的对象来存储键/值数据,它们处理的非常出色: ```jsx const person = { firstName: 'Alex', lastName: 'MacArth

如何使用Photino创建Blazor项目进行跨平台

Photino是什么 Photino是一组使用Web (HTML/CSS/JavaScript)UI创建桌面应用程序的技术。TryPhotino.io 维护 .NET 构建,并鼓励社区开发 Photino.Native 控件以用于其他语言和平台。我们鼓励并将支持Photino.CPP,Photino

Vue vs React:你需要知道的一切

Vue 和 React 是创建 JavaScript 网络应用程序最常用的两种工具。但我们该如何在两者之间做出选择呢?在本篇 Vue 与 React 的对比中,我们将尝试找出答案。我们将回顾每种工具的优缺点,提供选择使用哪种工具的技巧,并帮助你开始使用。 总览 什么是Vue? Vue趣事 什么是Re

如何使用JavaScript实现在线Excel附件的上传与下载?

前言 在本地使用Excel时,经常会有需要在Excel中添加一些附件文件的需求,例如在Excel中附带一些Word,CAD图等等。同样的,类比到Web端,现在很多人用的在线Excel是否也可以像本地一样实现附件文件的操作呢?答案是肯定的,不过和本地不同的是,Web端不会直接打开附件,而是使用超链接单