简单的一个数据表的增删查改的总体界面的展示效果例如以下图:
1.datagrid数据载入问题
datagrid通过url请求后台数据,总记录数和数据行的属性是固定死的。数据行是rows,总记录数为total
List<Map<String,Object>> maplist = configMgrService.listAllAccessIps(pb);
JsonConfig config = new JsonConfig();
config.registerJsonValueProcessor(Timestamp.class, new DateJsonValueProcessor("yyyy-MM-dd HH:mm:ss"));
config.registerJsonValueProcessor(Date.class,new DateJsonValueProcessor("yyyy-MM-dd"));
JSONArray jsonArray=JSONArray.fromObject(maplist,config);//将list转换JSONArray对象
Map<String,Object> result = new HashMap<String,Object>();
result.put("total",pb.getCondition().get("total"));
result.put("rows", jsonArray);
response.setContentType("text/javascript;charset=UTF-8"); //防止中文乱码
ObjectMapper objMap = new ObjectMapper();
objMap.writeValue(response.getWriter(), result);
2.分页的问题
我配置的是每页显示5条,结果一刷新就是10条,但点击下一页上一页不会有这个问题。
解决:将pageSize属性配置在datagrid属性里边,假设单独通过datagrid来getPager,然后再配置就会出现这个问题
var p = $('#infoAccessLimitDG').datagrid('getPager');
$(p).pagination({
pageSize:5,//这里配置的不会有什么作用
beforePageText : '第',//页数文本框前显示的汉字
afterPageText : '页 共 {pages} 页',
displayMsg : '当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
$("#infoAccessLimitDG").datagrid({
pageSize:5,//在这里配置才会起作用
.....
});
3.中文乱码
后台写回数据给前台时。前台中文显示乱码,不知道怎么回事,在xml文件配置解决不了乱码的问题。暂时的解决方式,就是在写数据前,给HttpServletResponse response设置下编码
response.setContentType("text/javascript;charset=UTF-8"); //防止中文乱码
ObjectMapper objMap = new ObjectMapper();
objMap.writeValue(response.getWriter(), result);
4.日期格式化显示
a.数据列显示的问题:后台数据格式为Date,前端显示的是yyyy-MM-dd 00:00:00格式。给数据列加入格式化器属性
<th field="startDate" formatter="dateFormatter">有效日期(起)</th>
//js代码
function dateFormatter(val,row)
{
if(val != null)
{
var year = val.substring(0,4);
var month = val.substring(5,7);
var day = val.substring(8,10);
return year + '-' + month + '-' + day;
}
else return "";
}
5.表单提交。表单中含有日期表单元素,总是提交不到后台~!
表单。用的是easyUI提供的日期控件,获取值和设置有点点的不同
$("#infoAccessLimitFm #endDate").datebox('getValue');//获取值
$("#infoAccessLimitFm #startDate").datebox('setValue',row.startDate);//设置值
以Ajax方式提交,提交不到后台
$.ajax({
type:"POST",
url:url,
dataType: 'json',
data:{'limitCode':limitcode,'accessIp':accessIp,'accessType':accessType,
'appName':appName,'startDate':startDate,'endDate':endDate,'id':ialId},
success:function(data)
{
alert(data.msg);
$('#dlg').dialog('close');
$("#infoAccessLimitDG").datagrid("reload");
},
error:function(e)
{
alert("操作出错:"+e);
}
});
提交时。參数设值时。识别不了这个日期參数。导致提交失败。
通过注解来格式化
/**
* 有效日期起始日期
*/
@DateTimeFormat(pattern="yyyy-MM-dd")
public Date startDate;