1,思路:前端获取显示页面的接口,前端获取接口后显示该页面,本页面内存在显示数据的接口获取当前页的数据,
同时在显示的数据里有一个函数,点击触发进入后端另一个页面接口,又会获取到触发点击函数页面,触发函数页面会有一个调该页面数据的接口。。。。(循环往复)
在Controller:
@RequiresPermissions("sys:demo:list")
@RequestMapping(value = {"list", ""})
public String list(DemoEntity demoEntity , Model model){
model.addAttribute("demoEntity ", demoEntity );
return "modules/sys/demo/firstpagelist";
}
<% layout('/layouts/default.html', {title: '当前页标题', libs: ['dataGrid']}){ %> <div class="main-content"> <div class="box box-main"> <div class="box-header"> <div class="box-title"> <i class="fa icon-notebook"></i> ${text('当前页副标题')} </div> <div class="box-tools pull-right"> <a href="#" class="btn btn-default" id="btnSearch" title="${text('查询')}"><i class="fa fa-filter"></i> ${text('查询')}</a> </div> </div> <div class="box-body"> <#form:form id="searchForm" model="${demoEntity}" action="${ctx}/sys/listData" method="post" class="form-inline hide" data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}"> <div class="form-group"> <label class="control-label">${text('属性1')}:</label> <div class="control-inline"> <#form:input path="属性1" maxlength="64" class="form-control width-120"/> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-sm">${text('查询')}</button> <button type="reset" class="btn btn-default btn-sm">${text('重置')}</button> </div> </#form:form> <table id="dataGrid"></table> <div id="dataGridPage"></div> </div> </div> </div> <% } %> <script> // 初始化DataGrid对象 $('#dataGrid').dataGrid({ sortableColumn: false, searchForm: $("#searchForm"), columnModel: [ {header:'${text("属性1")}', name:'param1', index:'param1', 100, align:"center", frozen:true}, //引入页面跳转(同时将参数传给后端) {header:'${text("属性2")}', name:'param2', index:'param2', 100, align:"center", frozen:true, formatter: function(val, obj, row, act){ return '<a href="页面跳转的接口/clicklist?param2='+row.param2+'" class="btnList" data-title="${text("点击页面标题")}">'+(val||row.param1)+'</a>'; },align:"center"}, {header:'${text("属性3")}', name:'param3', index:'param3', 100, align:"center", frozen:true}, //添加字典后属性显示 {header:'${text("属性4")}', name:'param4', index:'param4', 100, align:"center",formatter: function(val, obj, row, act){ return js.getDictLabel(${@DictUtils.getDictListJson('param4')}, val, '${text("0")}', true) } }, //另一种页面跳转方式 {header:'${text("查看详情")}', name:'actions', 50, sortable:false, title:false, formatter: function(val, obj, row, act){ var actions = []; <% if(hasPermi('权限码')){ %> actions.push('<a href="${ctx}/页面跳转的接口/clicklist?param2='+row.param2+'" class="btnList" title="${text("查看详情")}"><i class="fa fa-info"></i></a> '); <% } %> return actions.join(''); }}, ], // 加载成功后执行事件 ajaxSuccess: function(data){ } }); </script>
调页面的显示数据:
@RequiresPermissions("zkgj:countOpenLock:view")
@RequestMapping(method = RequestMethod.POST,value = "/sys/listData")
@ResponseBody()
public Page<DemoEntity> listData(DemoEntity demoEntity, HttpServletRequest request, HttpServletResponse response) {
//实例化page对象(改)
Page<DemoEntity> page=new Page<DemoEntity>(request, response);
demoEntity.setPage(page);
//获取统计信息并封装与页面page内
page = demoEntityService.findPageByParam(demoEntity);
return page;
}
//点击跳转的页面接口
@RequiresPermissions("权限码")
@RequestMapping(value="clicklist")
public String clickDeviceIdSelectlist(String param2, Model model) {
//将从统计页面获取到的deviceId传递到统计详情页面
model.addAttribute("param2", param2);
return "点击页面的路径地址";
}
<% layout('/layouts/default.html', {title: '点击页面标题', libs: ['dataGrid']}){ %> <div class="main-content"> <div class="box box-main"> <div class="box-header"> <div class="box-title"> <i class="fa icon-notebook"></i> ${text('点击页面副标题')} </div> </div> <div class="box-body"> <#form:form id="searchForm" model="${param2}" action="/clicklistData?param2=${param2}" method="post" class="form-inline hide" data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}"> </#form:form> <table id="dataGrid"></table> <div id="dataGridPage"></div> </div> </div> </div> <% } %> <script> // 初始化DataGrid对象 $('#dataGrid').dataGrid({ searchForm: $("#searchForm"), columnModel: [ {header:'${text("属性1")}', name:'param1', index:'对应数据库字段', 150, align:"center"}, {header:'${text("属性2")}', name:'param2', index:'对应数据库字段', 150, align:"center"}, //注意转字典 {header:'${text("属性3")}', name:'param3', index:'对应数据库字段', 150, align:"center" //根据字典替换 ,formatter: function(val, obj, row, act){ return js.getDictLabel(${@DictUtils.getDictListJson('对应数据库字段')}, val, '${text("0")}', true) }}, ], // 加载成功后执行事件 ajaxSuccess: function(data){ }, timestampFormatDate: function(timestamp,format){ let date=timestampToDate(timestamp); let result=formatDate(date,format); return result; } }); </script>
//点击跳转的页面获取数据的接口
@RequiresPermissions("权限码")
@RequestMapping(method = RequestMethod.POST,value ="/clicklistData")
@ResponseBody()
public Page<DemoEntity> clickSelectlistData(String param2, HttpServletRequest request, HttpServletResponse response) {
//实例化page对象对request的数据进行封装(pageCount pageNo PageSize)
Page<DemoEntity> page=new Page<DemoEntity>(request, response);
//将deviceId封装到实体类中(好处:省去了对deviceId进行是否为空的判断)
DemoEntity demoEntity=new DemoEntity();
demoEntity.setParam2(param2);
demoEntity.setPage(page);
//获取统计信息并封装与页面page内
page = demoEntityService.clickDeviceId(demoEntity);
return page;
}
以上便是我做分页时的Controller及页面的部分代码