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

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;