技术：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="100%;height:600px;"> <!-- 顶部 --> <div data-options="region:'north',split:true," style="height:158px;"> <div style="100%;height:100px;margin-top:0px;"> <img alt="" src="images/head.jpg" width="100%"> </div> <!-- 顶部导航标签 --> <div style="background-color:#393755;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="15%;"> <!-- 导航菜单 --> <div id="aa" class="easyui-accordion" style="100%;height:100%;"> <div title="基本信息/打卡" style="overflow:auto;"> <a class="easyui-linkbutton" id="add_tab" href="#" style="100%" title="dakaMain.jsp">上下班打卡</a><br> <a class="easyui-linkbutton" href="#" style="100%" data-options="iconCls:'icon-search'" title="shangxiabanBiaoZhun.jsp">上下班标准</a><br> </div> <div title="查询考勤信息" style="overflow:auto;"> <a class="easyui-linkbutton" href="#" style="100%" data-options="iconCls:'icon-ok'" title="rikaoqinxinxi.jsp">日考勤信息</a><br> <a class="easyui-linkbutton" href="#" style="100%" data-options="iconCls:'icon-undo'" title="yuekaoqinxinxi.jsp">月考勤信息</a><br> <a class="easyui-linkbutton" href="#" style="100%" data-options="iconCls:'icon-man'" title="jiabanxinxi.jsp">加班信息</a><br> <a class="easyui-linkbutton" href="#" style="100%" data-options="iconCls:'icon-add'" title="tongjiyuekaoqin.jsp">统计月考勤</a><br> </div> <div title="请假申请"> <a class="easyui-linkbutton" href="#" style="100%" data-options="iconCls:'icon-tip'" title="qingjiaxinxi.jsp">请假信息</a><br> <a class="easyui-linkbutton" href="#" style="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="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="1100px"></table>
jQuery构建DataGrid：
$("#dg").datagrid({
url:"KaoqinbiaozhunSelect",
// 定义列
columns:[[
{field:'id',title:'序号',100},
{field:'shangban',title:'上班时间',100,sortable:true,
formatter:function(value,row,index){
valuee = getDate(value);
return valuee;
},
},
{field:'xiaban',title:'下班时间',100,
formatter:function(value,row,index){
valuee = getDate(value);
return valuee;
},
},
{field:'jidu',title:'季度',100},
{field:'chidao',title:'迟到',100,
formatter:function(value,row,index){
return "超过"+value+"分钟";
},
},
{field:'kuanggong',title:'旷工',100,
formatter:function(value,row,index){
return "超过"+value+"分钟";
},
},
{field:'qiyongtype',title:'启用状态',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接收请求，调用逻辑层方法进行项目功能的实现。
页面效果：
其它内容将在以后的博客中进行展示。