在springMVC的Controller中以Map的方式作为返回结果，然后解析成JSON传输给JS

最新推荐文章于 2024-07-09 16:26:29 发布

ciddk2085

最新推荐文章于 2024-07-09 16:26:29 发布

阅读量2.2k

点赞数

文章标签： json java 前端 ViewUI

原文链接：https://my.oschina.net/chaenomeles/blog/541498

版权

在springMVC的Controller中以Map的方式作为返回结果，然后解析成JSON传输给JSP页面。以easyUI为例记录（工作中用到了，就在此记录一下。）

@RequestMapping({ "/list" })

@ResponseBody

public Map<String,Object> getList(HttpServletRequest rq, String page, String rows, String fileName, String refSys) {

LogUtils.debug("文件列表-开始", page, rows, fileName);

Map<String, Object> map = new HashMap<String, Object>();

if (!StringUtils.isEmpty(page)) {

setCurrentPage(Integer.parseInt(page));

}

if (!StringUtils.isEmpty(rows)) {

setPageSize(Integer.parseInt(rows));

}

Map<String, Object> params = new HashMap<String, Object>();

if (fileName != null && !fileName.equals("")) {

params.put("fileName", fileName.toUpperCase());

}

if (refSys != null && !refSys.equals("")) {

params.put("refSys", refSys.toUpperCase());

}

List<?> list = null;

try {

LogUtils.debug("文件列表-查询列表总数", page, rows, fileName);

setTotalCount(getFileService().getFileCount(params));

LogUtils.debug("文件列表-查询列表总数结果", page, rows, fileName, getTotalCount());

LogUtils.debug("文件列表-查询列表数据", page, rows, fileName);

list = getFileService().listFile(firstResult(), getPageSize(), params);

map.put("total", getTotalCount());

map.put("rows", list);

LogUtils.debug("文件列表-查询列表数据结果", page, rows, fileName, getTotalCount());

} catch (PlatformException e) {

LogUtils.error(e.getLocalizedMessage(), e.getParams());

} catch (Exception e) {

LogUtils.error("文件列表-查询失败", e);

}

return map;

}

JSP页面中，easyUI的datagrid的使用。

/**

加载用户数据

$('#list-SysFile').datagrid({

url:'<%=request.getContextPath() %>/file/list.do',

rownumbers:true,

singleSelect:false,

height: 'auto',

pageSize: '${pagesize}',

pageList : [12, 20, 40],//可以选择的分页集合

pagination:true,

multiSort:true,

fitColumns:true,

checkOnSelect:false,

striped:false,

autoRowHeight:true,

fit:true,

columns:[[

{ checkbox:true},

{ field:'fileName',title:'文件名',width:50},

{ field:'refSys',title:'所属系统',width:50},

{ field:'createTime',title:'创建时间',width:50, formatter: function(value,row,index){

return new Date(value).toLocaleString();

}},

{ field:'opt',title:'操作', width:50,align:'center',

formatter: function(value,row,index){

var a = '<a class="easyui-linkbutton" href="javascript:version('+"'"+row.refSys+"'"+','+"'"+row.id+"'"+')">查看文件</a> ';

a += ' <a class="easyui-linkbutton" οnclick="editDriverWage('+"'"+row.driverId+"'"+','+"'"+row.yearM+"'"+')" href="javascript:void(0)">查看历史</a>';

return a;

}

]]

});

</script>

所解析成的JSON：

{"total":28,"rows":[{XXXXX},{XXXXX},{XXXXX},{XXXXX}]}

datagrid的用法，大概是这样的：
它的一个url属性，指向了一个文件或者是一个地址。这个地址或者文件当中就是你的数据，这里使用json格式保存数据，而且在格式上有一定的要求，比如：
{"total":28,"rows":[{XXXXX},{XXXXX},{XXXXX},{XXXXX}]}
使用total表示datagrid的总数,而它的数据则记录在rows里面，"rows":[.....]  表示一个数组，里面会有N条记录，
其中每一条记录可以为{"uname","","age":20}类似这样的形式，其实就是和字段值。

=====================================================================================
jquery里没有datagrid，更没有rowData。
在easy ui中有个datagrid，而rowData并不是datagrid里的属性、事件、方法。然而在部分属性或事件里，会有参数，rowData。当然，并不是说一定要用rowData这个字符串做为变量。这只是由用户定义的。它的意思就是指row data（行的记录数据）那么，所定义datagrid的列名，就是field。都将成为rowData的键名。那么rowData[键名]就可以得到一行中的值。

 
文件名，所属系统，创建时间都是Controller中传过来的属性。而操作这一字段不是从Controller中传过来的，但是也可以在datagrid的Columns中定义，只是在formatter：function(index,rowdata,value) {
alert(value);}时会报undefine.而在Controller中传过来的属性，在其对应的formatter的function中alert(value)会显示这个属性的值。
至于index：请看图中，经过datagrid之后在页面返回了两行数据，则index中包含的值就有0，1；
rowData：它是一个对象，一行就是一个对象，在前端页面时，你鼠标聚焦在哪一行就等于是选择了这一行所代表的rowData，我们可以通过rowData.fieldName去取这个对象里面的属性值，前提是这个属性在Controller中有传过来，否则将是undefine.

转载于:https://my.oschina.net/chaenomeles/blog/541498