考勤系统——代码分析datagrid

datagrid是easyui的控件，DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

建立：以table标签建立

<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;';
}
},
},
]],

url指定Servlet，为数据来源，Servlet中调用后台逻辑方法，去查询数据库，返回数据。datagrid 接收的数据必须是json格式，可以通过封装的形式封装一个json便于数据库查询到的数据进行转格式。

封装json:

public class PageJSON<T> {
private int total = 0;
private List<T> rows = new ArrayList<T>();
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
public List<T> getRows() {
return rows;
}
public void setRows(List<T> rows) {
this.rows = rows;
}
public PageJSON(int total, List<T> rows) {
super();
this.total = total;
this.rows = rows;
}
public PageJSON() {
super();
}

调用：

PageJSON<KqJiabanxinxi> pj = new PageJSON<KqJiabanxinxi>();
String rtn = "{\"total\":0,\"rows\":[]}";
int total = new JiabanxinxiDao().getTotalall(map);
if(total>0){
List<KqJiabanxinxi> list = new JiabanxinxiDao().getPageListKQ(page, rows,map,sort);
pj.setTotal(total);
pj.setRows(list);
rtn = JSONObject.toJSONString(pj);
}
return rtn;

datagrid接收到数据后就会在数据表中将数据显示出来，列中 field:‘对应json的字段名’

其它属性：

　　　　　striped:true,  // 斑马线效果
rownumbers:true,       // 显示行号
pagination:true,      // 显示分页栏
pageList:[4,8], // 每页行数选择列表
pageSize:4,        // 初始每页行数
remoteSort:true,
sortName:'id',
sortOrder:'desc',

可以在datagrid数据表中添加按钮，toolbar的形式添加：

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')
},},

在按钮上也可以添加jQuery来进行功能的实现。

页面展示：