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

最新推荐文章于 2022-10-11 09:04:31 发布

weixin_34232363

最新推荐文章于 2022-10-11 09:04:31 发布

阅读量128

点赞数

文章标签： java javascript 测试 ViewUI

原文链接：https://my.oschina.net/ytliyang/blog/652685

版权

2019独角兽企业重金招聘Python工程师标准>>>

同样，按照一个步骤来，先看下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的同时引用一下就可以了。重用性会高一点儿。

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

转载于:https://my.oschina.net/ytliyang/blog/652685