屏幕快照 2016-05-27 下午4.34.34.png


Controller

	/**
	 * 多数据表联合查询、搜索、排序、状态码js缓存、分页示例
	 */
	@RequestMapping("/list5")
	public String list5(HttpServletRequest request,Model model){
		Sql sql = new Sql(request);
		//因多表查询，这里设定上form搜索的是哪个数据表的字段，这里是log表
		sql.setSearchTable("log");
		//增加添加搜索字段。这里的搜索字段跟log表的字段名对应
		sql.setSearchColumn(new String[]{"type=","value","userid="});
		//查询log数据表的记录总条数
		int count = globalService.count("log", sql.getWhere());
		//每页显示15条
		Page page = new Page(count, 15, request);
		//创建查询语句，只有SELECT、FROM，原生sql查询。其他的where、limit等会自动拼接
		sql.setSelectFromAndPage("SELECT log.*,(SELECT nickname FROM user WHERE user.id = log.userid) AS nickname FROM log", page);
		
		//当用户没有选择排序方式时，系统默认排序。
		sql.setDefaultOrderBy("log.id DESC");
		//因联合查询，结果集是没有实体类与其对应，故而用List<Map>接收
		List<Map<String, Object>> list = globalService.findMapBySql(sql);
		
		//将数据记录传到页面以供显示
		model.addAttribute("list", list);
		//将分页信息传到页面以供显示
		model.addAttribute("page", page);
		return "demo/list/list5";
	}


创建js数据缓存文件

创建com.guanleiming.iwdemo.grnerateCache包；增加Log.java

package com.guanleiming.iwdemo.grnerateCache;
import com.xnx3.j2ee.generateCache.BaseGenerate;

/**
 * log数据表，js缓存生成
 * @author 管雷鸣
 *
 */
@Component
public class Log extends BaseGenerate {
	public Log(){
	    type();
	}
	/**
	 * log.type 值－描述 缓存
	 */
	public void type(){
		createCacheObject("type");
		
		cacheAdd("11", "用户登陆");
		cacheAdd("12", "修改头像");
		cacheAdd("13", "修改密码");
		//……
		
		generateCacheFile();
	}
	
}

项目启动后，会自动再跟目录创建文件夹 /cache/js/，并在其下生成文件名为Log_type.js 的文件。

注：生成的Log_type.js，前面的Log为类名，type为：createCacheObject("type"); 这里设置的。

        在这个文件里，存有一个js变量跟一些常用的快速使用方法。js变量为：

    var type = new Array(); 
    type['10']='用户注销登录'; 
    type['11']='用户登录'; 
    type['12']='修改头像';


View

增加demo/list/list5.jsp

<%@page import="com.xnx3.j2ee.Global"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
<%@ taglib uri="http://www.xnx3.com/java_xnx3/xnx3_tld" prefix="x" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
	<jsp:include page="../../publicPage/adminCommon/head.jsp">
		<jsp:param name="title" value="日志列表DEMO"/>
	</jsp:include>
	<script src="<%=basePath+Global.CACHE_FILE %>Log_type.js"></script>
</head>
<body>

<div>
	<!-- 表单搜索 -->
	<form method="get" style="margin-top:20px;">
		<input type="hidden" name="orderBy" value="<%=request.getParameter("orderBy") %>" />
		<span style="float:left;line-height:34px;margin-left:10px;">用户ID：</span>
			<div class="input-group m-bot15 " style="width: 15%;float: left;">
				<input type="text" name="userid" class="form-control" value="<%=request.getParameter("userid")==null? "":request.getParameter("userid")  %>">
			</div>
		<span style="float:left;line-height:34px;margin-left:10px;">动作类型：</span>
			<div class="input-group m-bot15 " style="width: 15%;float: left;">
				<select name="type" class="form-control">
					<script type="text/javascript">writeSelectAllOptionFortype('<%=request.getParameter("type") %>');</script>
				</select> 
			</div>
		<span style="float:left;line-height:34px;margin-left:10px;">描述：</span>
			<div class="input-group m-bot15 " style="width: 15%;float: left;">
				<input type="text" name="value" class="form-control" value="<%=request.getParameter("value")==null? "":request.getParameter("value")  %>"> 
			</div>
		<div class="input-group m-bot15 " style="width: 100px; float: left;">
			<span class="input-group-btn">
				<input class="btn btn-success" type="submit" value="搜索">
				<i class="fa fa-search"></i>
			</span>
		</div>
	</form>  
	
	<!-- 用户自定义排序规则 -->
	<div style="float:right;">
		<script type="text/javascript"> 
			orderBy('id_DESC=编号由大到小,id_ASC=编号由小到大,userid_ASC=用户ID由小到大'); 
		</script>
	</div>
</div>

<!-- 列表数据 -->
<table class="table table-bordered table-striped table-condensed">
	<thead>
		<tr>
			<th>编号</th>
			<th>用户昵称</th>
			<th class="numeric">动作编号</th>
			<th class="numeric">记录内容</th>
			<th class="numeric">操作时间</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach items="${list}" var="log">
			<tr>
				<td>${log['id'] }</td>
				<td>${log['nickname'] } (ID:${log['userid'] })</td>
				<td><script type="text/javascript">document.write(type[${log['type']}]);</script></td>
				<td>${log['value'] }</td>
				<td><x:time linuxTime="${log['addtime'] }"></x:time></td>
			</tr>
		</c:forEach>
	</tbody>
</table>

<!-- 通用分页跳转 -->
<jsp:include page="../../publicPage/adminCommon/page.jsp">
	<jsp:param name="page" value="${page }"/>
</jsp:include>

<jsp:include page="../../publicPage/adminCommon/footImport.jsp"></jsp:include>
</body>
</html>


如上，需导入生成的缓存js文件 

<script src="<%=basePath+Global.CACHE_FILE %>Log_type.js"></script>

from搜索表单中，<select>标签使用的是 writeSelectAllOptionFortype方法，其中writeSelectAllOptionFor是固定的名字前缀，调出所有select中的operate，最后的type便是创建Log.java时，设置的createCacheObject("type")



'); })();