springmvc+easyui 数据显示

springmvc+easyui

最近断断续续在写ssm+easyui datagrid显示，中间遇到一些问题，因为对框架的原理这些不是很理解，所以即使百度了还是不能解决。后来看了些视频教程，直到现在才显示成功，现在想来不难，所以把过程在此记录一下

@Controllerpublic class UserController {@Autowiredprivate UserService userService;@RequestMapping("/queryUser") public @ResponseBody Map<String,Object> queryUserList(HttpServletRequest request) throws Exception{             List<User> userlist=userService.findUserList();        Map<String,Object> map=new HashMap<String,Object>();        map.put("total", userlist.size());        map.put("rows", userlist);        System.out.println(userlist);        return map;            }}

@ResponseBody可直接将java对象转换成json格式
easyui和后台交互通过json数据

访问controller直接可以返回jason数据

接下来就是需要把此json数据显示到easyui界面

<script type="text/javascript" charset="utf-8">var datagrid;$(function(){$('#datagrid').datagrid({          fit:true,          fitColumns : true,          rownumbers : true,          border : false,          striped : true,          url:'../queryUser.action',           toolbar : '#student_tool',          rownumbers:true,//显示行号         pagination:true,//显示分页工具条         pageList : [5, 10, 15,20],         pageNumber : 1,         pageSize : 5,         sortName : 'id',         sortOrder : 'ASC',                 columns:[[                {                 field:'id',                 title:'编号',                checkbox:true,                 width:100,             },{                 field:'name',                 title:'姓名',                 sortable:true,                 width:100,             },{                 field:'age',                 title:'年龄',                 sortable:true,                 width:100,             },{                 field:'hobby',                 title:'爱好',                 width:100,                             }]],             toolbar:[{             text:'增加' ,             iconCls:'icon-add',             handler:function(){             }             },{             text:'删除' ,             iconCls:'icon-remove',             handler:function(){             }             },{             text:'修改' ,             iconCls:'icon-edit',             handler:function(){             }             },{             text:'查询' ,             iconCls:'icon-search',             handler:function(){             }             }]     });});</script><div class="easyui-tabs" fit="true" border="false"><div title="用户管理"><table id="datagrid"></table></div></div>

datagrid中的url路径得写正确

开始写的是绝对路径${pagecontext.request.contextpath}/queryUser.action不对，Chrome检查有个错误，得到的是错误的路径

后来就改为../queryUser.action就正确了

还有这其中反反复复显示这个错误(jquery报错)

Cannot read property 'length' of undefined 

后来把url替换成正确的json文件 跟自己的进行对比才发现我把rows写成了row

自己检查的时候可以把url写json文件直接显示数据，不需要通过后台数据显示

center.json

{"total":3,"rows":[{"id":1,"name":"张三ss","age":34,"hobby":"篮球"},{"id":2,"name":"小白","age":23,"hobby":"足球"},{"id":3,"name":"花花","age":67,"hobby":"电脑"}]}

然后把url改掉，也可以正常显示数据

url:'center.json',

现在可以正确显示了