jeesite列表条目根据屏幕自适应实现方案

原创于 2017-10-23 16:26:03 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何在JeeSite框架中实现根据屏幕大小自适应调整列表每页显示的条目数量。通过前端计算屏幕高度并发送到后端设置会话变量，再由相关控制器读取该变量来调整分页查询的条数。

jeesite中列表显示的每页条目为固定值，被设置在配置文件jeesite.properties中。

如果想在界面上按当前屏幕大小显示相应条目，需要在每个controller的list请求中增加pageSize的配置。方法如下：

1、在默认首页的jsp中获取屏幕大小，计算可以显示的条目。

function setNum(){
				var height = $(window).height();
				height = height-170;
				var num = parseInt(height/30)-1;
				console.log(num);
				$.ajax({
					url : "${ctx}/sys/welcome/setPageNum",
					type : "post",
					data : {
						pageSize : num
					}
				})
			}

2、在对应后台，设置session。

@RequestMapping(value = {"setPageNum"})
	public void setPageNum(String pageSize,HttpSession session) {
		session.setAttribute("pageSize", pageSize);
	}

3、在需要展示的controller中，修改list响应，增加HttpSession session参数，获取上面设置的pageSize，并修改即将查询的page对象。

注意：根据现实列表的查询条件是单行还是多行，调节pageSize的大小。