SpringMVC前后台传递数据的jQuery遍历的形式（二）

摘要: 同样是前后台传递值的问题，jQuery的遍历如出一辙，这里记录一下通过EasyUI的datagrid来做list的情况

同样，按照一个步骤来，先看下ajax提交

function setDataList() {
var options = {
gridId: 'datagrid',
url : '${contextPath}cxgx/${yymc}/getJson',

然后跳转到RequestMapping为“cxgx/*/getJson”的Controller中，请忽略吊Pager<Map<String,Object>，这里不讲分页。

@Autowired
private CxgxService cxgxService;

@RequestMapping(value = "/{productId}/getJson", method = RequestMethod.POST)
@ResponseBody
public Pager<Map<String, Object>> getJson(@PathVariable String productId ,HttpServletRequest request) {
Pager<Map<String, Object>> pager = new Pager<Map<String, Object>>();
List<Map<String, Object>> list = cxgxService.getByYymc(productId);
pager.setRequiredData(request, list);
return pager;
}

从后台传过来的list要经过前台js的遍历来处理

onLoadSuccess : function(opt) {
opt = $.extend({}, defaults, opt);
$("#datagrid").datagrid(opt);
},
onClickRow : function(rowIndex, rowData) {},
}

同上一篇文章一样，将opt对象给了前台id为datagrid的对象。

<table id="datagrid" style="width: 100%" data-options="fit:true">
<thead>
<tr>
<th	data-options="field:'courtName',sortable:true,align:'center'" style="width:15%">名称</th>
<th	data-options="field:'IPDZ',sortable:true,align:'center'" style="width:14%">IP地址</th>
<th	data-options="field:'YYMC',sortable:true,align:'center'" style="width:12%">产品名称</th>
<th	data-options="field:'SJBBH',sortable:true,align:'center'" style="width:18%">升级版本号</th>
<th	data-options="field:'XH',sortable:true,align:'center',hidden:true">序号</th>
<th	data-options="field:'BSBXH',sortable:true,align:'center',hidden:true">部署表序号</th>
<th	data-options="field:'SJSJ',sortable:true,align:'center',formatter:formatDatetime" style="width:15%">升级时间</th>
<th	data-options="field:'SJSM',sortable:true,align:'center'" style="width:25%">升级说明</th>
</tr>
</thead>
</table>

从而生成一个datagrid的列表。

这个方法在引用了easyui时是比较常用的，毕竟把遍历写在公共的js里，固定下table的id为datagrid的同时引用一下就可以了。重用性会高一点儿。

这种方式适合系统后台做管理时的展现。