Spring mvc+Easyui遇到的几个问题

Posted 2020-09-27

简单的一个数据表的增删查改的总体界面的展示效果例如以下图：

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;