技術：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接收請求，調用邏輯層方法進行項目功能的實現。
頁面效果：
其它內容將在以后的博客中進行展示。