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