如何用JavaScripte和HTML 實現一整套的考試答題卡和成績表

相信在學校的你都有這樣的體驗,臨近考試,要瘋狂的“背誦”否則成績單就要掛零,因爲答題卡全部塗抹都是錯的。
那麼畢業多年的你,沒有了考試,有沒有一絲懷念塗答題卡的時候,有沒有好奇這個答題卡到底如何製作,成績表到底如何爲每位同學定製動態生成的。
這些都要歸功於“報表”工具
學校每年都會打印很多的學生成績單,往往因爲新增的課程和不同的教學體系,導致想要的結果複雜且多變的。那麼如何使用一個工具就可以靈活的製作各種各樣報表,面對多變的場景

上圖就是我們製作出來的一個答題卡報表,而且它可以根據學生數量批量加載學生的信息數據,然後直接生成並且供我們打印。那他的優勢也就顯而易見了,自己設計的答題卡,題型和題量都可以自己來選擇,靈活多變,且可以根據不同題型自己隨意更新。也可以增加很多默認數據,畢竟自己設計打印的肯定也比購買的便宜嘛。
自己製作報表困難嘛?
有些人可能就想說,自己做是不是很麻煩,而且也不會用,學起來是不是還很喫力。小編就可以自信的說了,作爲手殘黨的我也可以很快製作的,但是上限卻很高,越發深入的使用,帶來的肯定也是越多的經驗,當你製作多了後,還可以關注更多的功能,不僅僅是製作顯示出來,更好看的更多功能的纔是我們的追求。
就比如下面這個報表,只需要簡單的幾步就可以實現。而且效果還不錯。

實戰開始

首先我們要設計對應的報表,下面是報表設計的整體界面:

在左側是我們需要使用的組件,也就是設計報表需要的元素,中間就是顯示,最右側可以控制一些屬性設置和指定數據。這麼一看就很清晰了,我們其實簡單的拖拽就可以實現所需要的報表設計,簡單方便,設計好之後可以導出下載都可以。光說這些肯定還是不夠的,那麼接下來就直接上實例:

畢業信息表

當我們統計學校不同學院的畢業信息時,可能需要根據從系統中查到數據然後拿出來,之後在自己計算所需要的數據,然後在在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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章