学院信息管理系统
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:SQL VS (js jq)
作者:
撰写时间:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
一、功能与介绍
1、 项目名称:学院信息管理系统
初始页面如下图:
图一:初始页面
2、项目介绍:图中有一个模糊搜索框和一个新增按钮以及一个表单,表单中含有学院名称、学院编码、操作按钮的样式,表单下方还有一个分页的样式;
3、项目功能:图一搜索框内填入关键字通过reload()方法进行模糊搜索。
图二:模糊搜索
点击新增按钮它会弹出一个新增学院的模态窗体
图三:新增学院
当你的数据有一个为空时,则会弹出保存失败的提示框让你补充数据。利用Order By()方法点击保存会在末尾处添加一个新数据,并返回到第一个页面。
操作按钮分别为‘修改’、‘删除’两种,点击修改按钮弹出模态窗体,弹出修改学院窗体将绑定好的数据进行修改;
图四:修改学院
当数据名称或编码重复时,弹出提示框并停止运行;修改成功后页面刷新并保存新的数据。
点击删除按钮弹出提示框点击确定按钮完成删除。
图五:删除信息
二、重点代码
1、表格的重载 和模糊的查询
讲解:通过声明的变量TabAcademe表格渲染之后返回一个table实例;获取到查询框的id在TabAcademe.reload()方法中获取地址;利用where()接收查询的数据;page:{curr:1}回到第一页。
三、代码讲解
1.学院新增
方法1:通过$.post()/$.get()方法获取地址、以键值对的形式接收参数、调用function()回调函数执行内容;
方法2:XML Http Request跟后台交换数据
所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建XML Http Request 对象。通过一行简单的 JavaScript 代码,就可以创建 XML Http Request 对象
2、修改信息
它由两部分组成数据回填、数据保存构成
数据回填:通过$.post()/$.get()方法 “"地址?academe ID " + academe ID”用一个拼接的方法接收数据,再调用function()回调data接收执行内容;通过jq的方法获取id将数据的值绑定到相应的文本框内。
重点代码:
数据查询和判断
数据保存:申明一个变量接收绑定好的数据进行一个判断,判断数据为空或者重复;当数据为空时弹出提示框(“学院的名称(编码)不能为空”)并return false。
重点代码:
判断数据是否重复和先查询出数据库对应的学院信息
3、删除数据
由于删除数据是不可逆的,因此请小心地编写问题或消息,所以先调用confirm()方法它适合用确认和取消来回答询问,当你的数据在使用时点击删除会弹出提示框(“该学院信息在使用中无法删除”)并return false。
重点代码:
用学院ID去各个相关的表中查询数据并移除数据