考勤系统——代码分析

技术：Easyui，JSP，Servlet，Hibernate

主页面：使用Easyui布局

资源需要：

1 <!-- 1 JQuery的js包 -->
2 <script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
3 <!-- 2 CSS资源 -->
4 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">
5 <!-- 3 图标资源 -->
6 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">
7 <!-- 4 easyui的js包 -->
8 <script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
9 <!-- 5 本地语言  -->
10 <script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

布局：

<!-- 布局 -->
<div id="cc" class="easyui-layout" style="width:100%;height:600px;">
<!-- 顶部 -->
<div data-options="region:'north',split:true," style="height:158px;">
<div style="width:100%;height:100px;margin-top:0px;">
<img alt="" src="images/head.jpg" width="100%">
</div>
<!-- 顶部导航标签 -->
<div style="background-color:#393755;width:100%;height:50px;margin-top:0px;">
<a href="#"><div class="caidan">人事管理模块</div></a>
<a href="#"><div class="caidan">考勤管理模块</div></a>
<a href="#"><div class="caidan">招聘管理模块</div></a>
<a href="#"><div class="caidan">培训管理模块</div></a>
<a href="#"><div class="caidan">薪酬管理模块</div></a>
</div>
</div>
<!-- 底部 -->
<div data-options="region:'south',split:true" style="height:20px;">
<p> 汉企玛雅考勤系统</p>
</div>
<!-- 左侧导航 -->
<div data-options="region:'west',title:'导航菜单',split:true" style="width:15%;">
<!-- 导航菜单 -->
<div id="aa" class="easyui-accordion" style="width:100%;height:100%;">
<div title="基本信息/打卡" style="overflow:auto;">
<a class="easyui-linkbutton" id="add_tab" href="#" style="width:100%" title="dakaMain.jsp">上下班打卡</a><br>
<a class="easyui-linkbutton" href="#" style="width:100%" data-options="iconCls:'icon-search'" title="shangxiabanBiaoZhun.jsp">上下班标准</a><br>
</div>
<div title="查询考勤信息" style="overflow:auto;">
<a class="easyui-linkbutton" href="#" style="width:100%" data-options="iconCls:'icon-ok'" title="rikaoqinxinxi.jsp">日考勤信息</a><br>
<a class="easyui-linkbutton" href="#" style="width:100%" data-options="iconCls:'icon-undo'" title="yuekaoqinxinxi.jsp">月考勤信息</a><br>
<a class="easyui-linkbutton" href="#" style="width:100%" data-options="iconCls:'icon-man'" title="jiabanxinxi.jsp">加班信息</a><br>
<a class="easyui-linkbutton" href="#" style="width:100%" data-options="iconCls:'icon-add'" title="tongjiyuekaoqin.jsp">统计月考勤</a><br>
</div>
<div title="请假申请">
<a class="easyui-linkbutton" href="#" style="width:100%" data-options="iconCls:'icon-tip'" title="qingjiaxinxi.jsp">请假信息</a><br>
<a class="easyui-linkbutton" href="#" style="width:100%" data-options="iconCls:'icon-ok'" title="Qingjiashenqing.jsp">请假申请</a><br>
</div>
</div>

</div>
<!-- 中部内容显示 -->
<div data-options="region:'center',title:'信息展示'" style="padding:5px;background:#eee;">
<!-- 标签页 -->
<div id="tt" class="easyui-tabs" style="width:100%;height:100%;background:url(images/background.png)"></div>
</div>
</div>

jQuery：

$(function(){
// 打卡按钮
$("#add_tab").linkbutton(
{
iconCls:"icon-add",
}
);
// 生成新的标签页
$(".easyui-linkbutton").click(function(){
// 获取组件的属性和值
var str = $(this).text();
var tab_href = $(this).attr("title");
if($("#tt").tabs('exists',str)){
$("#tt").tabs('select',str);
}else{
$("#tt").tabs('add',{title:str,closable:true,//href:tab_href
content:"<iframe width='100%' frameborder='0' height='100%' src='"+ tab_href +"'></iframe>"
});
}
});
})

使用iframe解决标签页跳转冲突的问题：当标签页比较多的时候，使用href容易产生冲突，使两个标签页的数据无法同时显示。

$("#tt").tabs('add',{title:str,closable:true,//href:tab_href
content:"<iframe width='100%' frameborder='0' height='100%' src='"+ tab_href +"'></iframe>"

分页面布局使用Easyui的DataGrid（数据表格）作为主窗体，示例：上下班标准数据展示

<!-- 数据表 -->
<table id="dg" style="width:1100px"></table>

jQuery构建DataGrid：

$("#dg").datagrid({
url:"KaoqinbiaozhunSelect",
// 定义列
columns:[[
{field:'id',title:'序号',width:100},
{field:'shangban',title:'上班时间',width:100,sortable:true,
formatter:function(value,row,index){
valuee = getDate(value);
return valuee;
},
},
{field:'xiaban',title:'下班时间',width:100,
formatter:function(value,row,index){
valuee = getDate(value);
return valuee;
},
},
{field:'jidu',title:'季度',width:100},
{field:'chidao',title:'迟到',width:100,
formatter:function(value,row,index){
return "超过"+value+"分钟";
},
},
{field:'kuanggong',title:'旷工',width:100,
formatter:function(value,row,index){
return "超过"+value+"分钟";
},
},
{field:'qiyongtype',title:'启用状态',width:100,
formatter:function(value,row,index){
switch(value){
case 1:return "启用中...";break;
case 2:return "未启用";break;
}
},
styler: function(value,row,index){
if (value == 1){
return 'color:red;';
}
},
},
]],
striped:true,  // 斑马线效果
rownumbers:true,       // 显示行号
pagination:true,      // 显示分页栏
pageList:[4,8], // 每页行数选择列表
pageSize:4,        // 初始每页行数
remoteSort:true,
sortName:'id',
sortOrder:'desc',
onDblClickRow:function(index,row){
type="edit";
var data = $('#dg').datagrid('getSelected');
if(data){
// 设置主键字段只读
$("#id").textbox({readonly:true});
$('#form1').form('reset');
$('#form1').form('load',{id:data.id,
saveshangban:getDate(data.shangban),savexiaban:getDate(data.xiaban),savejidu:data.jidu,chidao:data.chidao,kuanggong:data.kuanggong,qiyongtype:data.qiyongtype
});
$('#saveBiaoZhun').dialog({title:'详细信息'}).dialog('open');
}
},
// 工具栏
toolbar:[
{iconCls:'icon-search',text:'查询',handler:function(){
var f = $("#form2").serialize();
$("#dg").datagrid({url:"KaoqinbiaozhunSelect?"+f}).datagrid('load')},},
// 添加
{iconCls:'icon-add',text:'添加',handler:function(){
type="add";
$("#id").textbox({readonly:false});
$("#form1").form('reset');
$("#saveBiaoZhun").dialog('open')
},},
// 修改
{iconCls:'icon-edit',text:'修改',handler:function(){
type="edit";
var data = $('#dg').datagrid('getSelected');
if(data){
// 设置主键字段只读
$("#id").textbox({readonly:true});
$('#form1').form('reset');
$('#form1').form('load',{id:data.id,
saveshangban:getDate(data.shangban),savexiaban:getDate(data.xiaban),savejidu:data.jidu,chidao:data.chidao,kuanggong:data.kuanggong,qiyongtype:data.qiyongtype
});
$('#saveBiaoZhun').dialog({title:'修改考勤标准'}).dialog('open');
}else{
alert("请选中一条信息");
}
},},
// 删除
{iconCls:'icon-delete',text:'删除',handler:function(){
var data = $("#dg").datagrid("getSelections");
if(data.length>0){
$.messager.confirm("确认","确定要删除吗？",function(r){
if(r!=null){
var ids = [];
for(var i=0;i<data.length;i++){
ids[i]=data[i].id;
};
$.get("BiaoZhunDelete?ids="+ids,function(rtn){
var msg = eval("("+ rtn +")");
alert(msg.messager);
if(msg.success){
$("#dg").datagrid('load');
}
});
};
});
}else{
alert("请选中信息");
}
},},
// 启用
{iconCls:'icon-remove',text:'启用',handler:function(){
var data = $("#dg").datagrid("getSelections");
if(data.length>0){
$.messager.confirm("确认","确定要启用新标准吗？",function(r){
if(r!=null){
var id = null;
var qiyongtype = null;
for(var i=0;i<data.length;i++){
id = data[i].id;
qiyongtype = data[i].qiyongtype
};
$.get("BiaoZhunQiyong?id="+id+"&qiyongtype="+qiyongtype,function(rtn){
var msg = eval("("+ rtn +")");
alert(msg.messager);
if(msg.success){
$("#dg").datagrid('load');
}
});
};
});
}else{
alert("请选中信息");
}
},}
],
});
})

通过以上方法进行页面的简单布局，通过Servlet接收请求，调用逻辑层方法进行项目功能的实现。

页面效果：



其它内容将在以后的博客中进行展示。