在整个学生选课系统里面,最核心的就是选课页面了。
我们设定目标为:
1、已经选修的课程,不能重复选修;
2、每个学生最多可选修不超过2门课程。
3、可选课程数量过多的时候,页面自动分页,每页默认最多显示10条数据。
为了实现目标,这里需要使用3个东西:
1、后端业务逻辑查询数据库,得出可以选修的课程,返回给前端页面,前端页面需要使用dataTable这个JS组件,实现即时搜索,自动分页等功能。
2、点击前端选修按钮之后,会弹出确认的框,这个要使用弹层。
3、弹出里面点击确认之后,JS使用post将信息返回到后端业务逻辑函数,将学生与需要选修的课程进行连接并且写入数据库。
1、使用dataTable组件
首先,为了实现自动翻页与即时搜索的功能,我们需要引用过一个js插件。在magic->组件库->带搜索表格,查看代码可以找到jquery.data.Tables.js与dataTables.bootstrap.js这个js插件,就是可以实现自动翻页与即时搜素的关键。
我们先建立一个temp.html用于测试(创建html,增加views函数,增加urls路由),然后拷贝代码。
views里面使用的据实在之前已经说过了,就是使用OCM进行跨表的连接,跨表部分需要使用“外键__字段”来进行自动连接。
urls添加路由,在数据库表课程表里面手动增加内容。
刷新前端temp页面,这样就可以实现展示后台可以选修的课程数据了。
2、制作弹层&POST数据
我们创建独立的JS文件,然后将JS的代码拷贝到JS文件里面,并且创建函数。
然后html里面写一个引用,引用该JS文件内容。
magicbox查找弹层,并且查看代码,将cs与js引用拷贝,将
你可能感兴趣的