关于jeesite页面数据跳转
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', width:100, align:"center", frozen:true}, //引入页面跳转(同时将参数传给后端) {header:'${text("属性2")}', name:'param2', index:'param2', width: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', width:100, align:"center", frozen:true}, //添加字典后属性显示 {header:'${text("属性4")}', name:'param4', index:'param4', width:100, align:"center",formatter: function(val, obj, row, act){ return js.getDictLabel(${@DictUtils.getDictListJson('param4')}, val, '${text("0")}', true) } }, //另一种页面跳转方式 {header:'${text("查看详情")}', name:'actions', width: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:'对应数据库字段', width:150, align:"center"}, {header:'${text("属性2")}', name:'param2', index:'对应数据库字段', width:150, align:"center"}, //注意转字典 {header:'${text("属性3")}', name:'param3', index:'对应数据库字段', width: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及页面的部分代码
原文地址:https://www.cnblogs.com/pureray-hui/p/12965246.html
- Vue.js实现一个SPA登录页面的过程
- vue实现侧边栏手风琴效果
- 关于vue的使用计算属性VS使用计算方法的问题
- 如何在vue中使用sass
- vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)
- jquery实现上下滑动选择
- echarts图表里label文字过长换行的方法
- 获取Object对象的length
- Vue引发的getter和setter
- 基于Vue.js的大型报告页项目实现过程及问题总结(一)
- 使用vue-axios请求geoJson数据报错的问题
- 在vue-cli项目中使用echarts
- Vue中的$set的使用
- 三分钟使用webpack-dev-sever搭建一个服务器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在Pytorch中使用Mask R-CNN进行实例分割操作
- PHP类的自动加载机制实现方法分析
- strpos() 函数判断字符串中是否包含某字符串的方法
- Laravel框架基于ajax和layer.js实现无刷新删除功能示例
- 详解php伪造Referer请求反盗链资源
- Laravel框架基于ajax实现二级联动功能示例
- django haystack实现全文检索的示例代码
- 基于Python下载网络图片方法汇总代码实例
- 基于pytorch中的Sequential用法说明
- pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
- tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
- PHP基于cookie实现统计在线人数功能示例
- PHP实现对数字分隔加千分号的方法
- PHP验证类的封装与使用方法详解
- Laravel框架实现的rbac权限管理操作示例