ajax局部刷新_OA系统 考勤签到 ajax查询考勤数据!!!

学习主题：OA系统

学习目标：

1 掌握web开发项目实战,熟练使用web开发基础技术

1. 考勤管理-签到-前台代码实现

(1) jQuery代码，页面初始化绑定事件，怎么实现？

将数据写在$(function(){})中,在页面加载完毕后就会自动绑定事件

2. 考勤管理-签到-全部功能实现

(1) 简述签到功能的逻辑？

签到功能:

用户点击签到发送请求给servlet ---> servlet获取session中的用户登录信息并获取当前时间 ----> 先调用业务层的find方法 查找是否有该用户今天的登录信息-->存在则返回已签到过,没有则调用业务层的save方法保存当前数据--->并返回保存结果

(2) ajax实现的步骤？

Ajax发送请求 给servlet --> servlet调用业务层处理数据,并将结果响应给ajax

--->ajax处理响应结果并显示在自定义区域

3. 签退-全部功能实现

(1) 简述签退逻辑。

签退功能:

用户点击签到发送请求给servlet ---> servlet获取session中的用户登录信息并获取当前时间 ----> 先调用业务层的find方法 查找是否有该用户今天的登录信息-->存在则返回已签到过,没有则调用业务层的save方法保存当前数据--->并返回保存结果

4. 通过Ajax获取查询条件之部门列表

(1) 进入考勤管理页面之后，如何加载所属部门下拉列表？

用户直接访问jsp页面 --> jsp页面在加载后写在$(function(){})中的ajax会自动发送请求给servlet-->servlet调用业务层方法查询到所有的部门---> response.getwriter().writer(deptList)将结果响应给ajax --> ajax得到结果具体使用如下

$.ajax({

url:"duty?method=findAllDept",

type:"post",

success:function(date){//ajax获取所有的部门

//将json格式数据字符串转化为可执行的js代码

eval("var arr="+date)

//将数据拼接成一个字符串,一次性刷新

var str="<option value='0'>全部</option>";

for(var i=0;i<arr.length;i++){

str+="<option value="+arr[i].deptno+">"+arr[i].deptname+"</option>"

}

$("#deptno").html(str);

}

})

(2) 点击查询后，显示所有签到信息，如何利用ajax实现，简述过程？

用户直接访问jsp页面 --> jsp页面在加载后写在$(function(){})中的ajax(获取查询条件并发送给服务器)会自动发送请求给servlet-->servlet调用业务层方法查询到所有的部门(利用stringbuffer判断字符串拼接)---> response.getwriter().writer(deptList)将结果响应给ajax --> ajax得到结果具体使用如下

//发送ajax请求数据

$.ajax({

url:"duty?method=findDuty", //查询条件S

data:{empId:empId,deptno:deptno,dtdate:dtdate},

type:"post",

dataType:"text",

success:function(date){ //根据回调函数刷新数据

//将json字符串---> json数据

eval("var arr="+date)

//将所有数据拼接为一个字符串

var str="";

for(var i=0;i<arr.length;i++){

str+='<tr>'+

'<td>'+

'<input name="" type="checkbox" value="" />'+

'</td>'+

'<td>'+arr[i].emp.empId+'</td>'+

'<td>'+arr[i].emp.realName+'</td>'+

'<td>'+arr[i].emp.dept.deptname+'</td>'+

'<td>'+arr[i].dtDate+'</td>'+

'<td>'+arr[i].signIntime+'</td>'+

'<td>'+arr[i].signOuttime+'</td>'+

'</tr>'

}

//输出

$("#bo").html(str)

}

})

5. 考勤管理-使用Ajax查询考勤信息

(1) 按照条件查询，可以有两种方式，第一种：点击查询按钮之后，请求后台servlet，然后从servlet中跳转到考勤管理页面，还有一种方式：利用ajax查询，请问这两种方式哪一种比较好？优点是什么呢？

Ajax方式好一点,局部刷新,不用全局刷新节省页面刷新时间

分享/讲解/扩展思考

点名提问从第一节课到最后一节课分别学到了什么，直到同学们把所有的知识点都说出来并且保证无误。

第108次（OA系统）

学习主题：OA系统

6. 使用Ajax查询考勤信息2

(1) 如何拼接考勤信息列表字符串?

var str="";

for(var i=0;i<arr.length;i++){

str+='<tr>'+

'<td>'+

'<input name="" type="checkbox" value="" />'+

'</td>'+

'<td>'+arr[i].emp.empId+'</td>'+

'<td>'+arr[i].emp.realName+'</td>'+

'<td>'+arr[i].emp.dept.deptname+'</td>'+

'<td>'+arr[i].dtDate+'</td>'+

'<td>'+arr[i].signIntime+'</td>'+

'<td>'+arr[i].signOuttime+'</td>'+

'</tr>'

}

//输出

$("#bo").html(str)

7. 考勤管理-使用Ajax查询考勤信息3

(1) 如何在后台sql中进行条件的拼接？

StringBuilder sql=new StringBuilder("select du.*,em.realName,de.deptname "

+ "from DUTY du,employee em,dept de "

+ "where du.emprid=em.empid and em.deptno=de.deptno ");

if (empid !=null && !empid.equals("")) {

sql.append(" and em.empid='"+empid+"'");//注意加上单引号,数据库查询会报错

}

if (deptno != 0) {

sql.append(" and de.deptno="+deptno);

}

if (dtdate !=null && !dtdate.equals("")) {

DateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");

String sdfdtdate=sdf.format(dtdate);

sql.append(" and to_char(du.dtdate,'YYYY-MM-DD')>='"+sdfdtdate+"'");

}

8. 考勤管理-使用POI导出考勤数据到xls1

(1) POI干嘛的？

Apache POI是Apache软件基金会的开放源码函式库，POI提供API给Java程序对Microsoft Office格式档案读和写的功能。

(2) POI和JXL的区别？

POI与jxl的区别：

1大的数据量,POI消耗的JVM内存远比JXL消耗的多. 相比提供的功能的话,JXL又相对弱了点.所以如果要实现的功能比较复杂的情况下可以考虑使用POI

2.jxl可以在非windows的环境下解析Excel.

3.jxl只能解析Excel,而poi可以解析word,Excel,ppt等4.jxl只能解析Excel2003版本的，对新版本Excel2007不支持

9. 考勤管理-使用POI导出考勤数据到xls2

(1) 如何使用POI，简述步骤？

导入

工具包,复制此文件

,将里面的createExcel()方法复制到你需要用到的类里 并调用, 修改其中参数

(2) 如何将后台查到的考勤数据，弄到前台客户端下载为excel，代码如何实现呢？

(3) 简述给出的OperateExcelUtil.java的功能含义？

将数据转化为xsl表格

10. 报销管理-理解数据库表和创建实体类

(1) 简述系统中表之间的关系：

11. 报销管理-添加报销单-视图层

(1) 在完成视图层操作中，有哪些注意事项？

(2) 在页面中，如何利用jQuery完成添加报销项操作？

function addExpenseItem(id){

//获取上级标签

var table = $(id);

//创建当前标签

var content = $('<tr>'+

'<td><div class="vocation"><select class="select1" name="type">'+

'<option value="1">通信费用</option><option value="2">办公室耗材</option><option value="3">住宿费用</option><option value="4">房租水电</option><option value="5">其他</option>'+

'</select></div></td>'+

'<td><input name="amount" type="text" class="dfinput" /><i></i></td>'+

'<td><input name="itemDesc" type="text" class="dfinput" /><i></i></td>'+

'<td><input type="button" class="btn" value="删除" οnclick="removeCurrItem(this)"/></td></tr>');

//加入上级标签

table.append(content);

$(".select1").uedSelect({

width : 345

});

}

(3) 在页面中，如何利用jQuery完成添加图片操作？

//获取上传图片li

var li = $("#uploadphoto");

//http://console.info(li);

//准备添加的dom对象

var content=$("<span><label> </label><input name='photo' type='file' class='dfinput' /><i></i>"+

"<input type='button' class='btn' value='删除' οnclick='removeCurrSpan(this)'/></span>");

//加入到指定位置

li.append(content);

12. 报销管理-添加报销单-控制层

(1) 页面中假如添加了多个报销项，那么在控制层接收数据的思路是什么呢？怎么接收数据呢？

获取所有报销项的三个数组 itemDesc type amount 通过循环组成多个报销项对象 , 在将报销想对象存入报销项数组中 ,然后在放入报销单对象中在调用方法添加到数据库

(2) 为什么在数据库中有状态码字段，这个字段的作用是什么？缺少这个字段可以吗？

描述报销单状态的属性

private String status;//报销单的状态 0:新创建 1:审核中 2.审核结束通过 3.审核结束驳回 4已打款

不可以,可以直观的看到报销单的状态