技术：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接收请求，调用逻辑层方法进行项目功能的实现。
页面效果：
其它内容将在以后的博客中进行展示。