点击表头实现排序

单击表头单元格实现排序

        在DRP项目中，讲解真是详略得当。对原理性和思想像的内容（比如Servlet、filter过滤器）进行了细致的分析并用RationalRose画程序执行顺序图（流程图）。对于简单的内容则被布置成作业或提出建议，自行完善和完成。本文，将实现其中的一个作业“单击表头单元格，对内容进行排序后重新输出”。

        sql查询语句（以user_id为 标识 排序）为：select user_id,user_name from t_user order by user_id;

业务逻辑代码（MVC中的C层）：（在DRP项目中，被嵌入在了jsp页面上，虽然代码写在页面上，但任然是服务端代码）

<%
	int pageNo = 1;
	int pageSize = 10;
	// 声明一个分页实例
	PageModel<User> pageModel = null;
	
	// 排序
	String order = request.getParameter("command");
	 
	// 获取当前页码
	String pageNo_call = request.getParameter("pageNo_Now");
	int pageNo_back = 0 ;
	if(pageNo_call != null) {
		pageNo_back = Integer.parseInt(pageNo_call);
	}
	// 获取排序字段
	String orderField = request.getParameter("orderField");
	/**
	 * 用户列表显示
	 *		* 若是排序操作，按排序后的数据显示
	 *		* 在没有排序操作的前提下，进行无序初始化
	 */
	if("order".equals(order)) {
		// 排序后网页显示
		pageModel = UserManager.getInstance().orderUser(pageNo_back,pageSize,orderField);
	}else{
		// 网页初始化（未排序）
		pageModel = UserManager.getInstance().findUserList(pageNo, pageSize);
	}
 %>

js代码：

	<script type="text/javascript">		
		// 排序
		function order(field) {
			
			// 取得当前页号
			 var pageNo_Now = <%= pageModel.getPageNo()%>;
			// 点击 用户代码
			if(field.id == "user_ID") {
				// 传递 排序的对象
				var orderField = "user_id";
				 window.self.location = "user_maint.jsp?pageNo_Now=" + pageNo_Now + "&orderField=" + orderField + "&command=order";
			}
			
			// 点击 用户名称
			if(field.id == "user_Name") {
				// 传递 排序的对象
				var orderField = "user_name";
				 window.self.location = "user_maint.jsp?pageNo_Now=" + pageNo_Now + "&orderField=" + orderField + "&command=order";
			}
			
			// 点击 联系电话
			if(field.id == "user_ContactTel") {
				// 传递 排序的对象
				var orderField = "contact_tel";
				 window.self.location = "user_maint.jsp?pageNo_Now=" + pageNo_Now + "&orderField=" + orderField + "&command=order";
			}
			
			// 点击 email
			if(field.id == "user_Email") {
				// 传递 排序的对象
				var orderField = "email";
				 window.self.location = "user_maint.jsp?pageNo_Now=" + pageNo_Now + "&orderField=" + orderField + "&command=order";
			}
			
			// 点击 创建时间
			if(field.id == "user_CreateDate") {
				// 传递 排序的对象
				var orderField = "create_date";
				 window.self.location = "user_maint.jsp?pageNo_Now=" + pageNo_Now + "&orderField=" + orderField + "&command=order";
			}
		}

	</script>

jsp中的表格：（MVC中的V层）

        <!--
            为表头thead字段设置id标签和οnclick="order(this)"触发事件
        -->

	<table id="userTable" width="95%" border="1" cellspacing="0" cellpadding="0" align="center" class="table1" >
		<thead>
			<tr>
				<td width="55" class="rd6">
					<input type="checkbox" name="ifAll" onClick="checkAll(this)">
				</td>
				<td width="119" class="rd6" οnclick="order(this)" id="user_ID">
					用户代码
				</td>
				<td width="152" class="rd6" οnclick="order(this)" id="user_Name">
					用户名称
				</td>
				<td width="166" class="rd6" οnclick="order(this)" id="user_ContactTel">
					联系电话
				</td>
				<td width="150" class="rd6" οnclick="order(this)" id="user_Email">
					email
				</td>
				<td width="153" class="rd6" οnclick="order(this)" id="user_CreateDate">
					创建日期
				</td>
			</tr>
		</thead>
		<tbody>
			<%	// 运用Iterator迭代器，遍历集合，填充表格内容
				List<User> userList = pageModel.getList();
				for(Iterator<User> iter = userList.iterator();iter.hasNext();) {
					User user = (User)iter.next();
			%>
			<tr>
				<td class="rd8">
					<input id="<%=user.getUserId()%>" type="checkbox" name="selectFlag" class="checkbox1"
						value="<%= user.getUserId() %>" />
				</td>
				<td class="rd8">
					<%=user.getUserId() %>
				</td>
				<td class="rd8">
					<%=user.getUserName() %>
				</td>
				<td class="rd8">
					<%=user.getContactTel() %>
				</td>
				<td class="rd8">
					<%=user.getEmail() %>
				</td>
				<td class="rd8">
					<%=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(user.getCreateDate()) %>
				</td>
			</tr>
			<%
				}
			%>
		</tbody>
	</table>

数据操作层（MVC中的M层）：查询数据并实现排序

	public class UserManager {
	
		private static UserManager instance = new UserManager();
		
		private UserManager() {}
		
		public static UserManager getInstance() {
			return instance;
		}
		
		/**
		 * 【有序】 分页查询 用户信息
		 * 
		 * @param pageNo 当前页码
		 * @param pageSize 每页显示的记录数
		 * @param orderField 排序匹配字段
		 * @return 有序的用户信息
		 */
		public PageModel<User> orderUser(int pageNo,int pageSize,String orderField) {
			String sql = "select user_id, user_name, contact_tel, email, create_date from t_user where user_id <> 'root' order by "+ orderField;
			Connection conn = null;		
			PreparedStatement pstmt = null;
			ResultSet rs = null;
			PageModel<User> pageModel = null;
			try {
				conn = DbUtil.getConnection();
				pstmt = conn.prepareStatement(sql);
				rs = pstmt.executeQuery();
				List<User> userList = new ArrayList<User>();
				while (rs.next()) {
					User user = new User();
					user.setUserId(rs.getString("user_id"));
					user.setUserName(rs.getString("user_name"));
					user.setContactTel(rs.getString("contact_tel"));
					user.setEmail(rs.getString("email"));
					user.setCreateDate(rs.getTimestamp("create_date"));
					userList.add(user);
				};
				pageModel = new PageModel<User>();
				pageModel.setList(userList);
				pageModel.setTotalRecords(getTotalRecords(conn));
				pageModel.setPageNo(pageNo);
				pageModel.setPageSize(pageSize);
	
			} catch (SQLException e) {
				e.printStackTrace();
			}finally {
				DbUtil.close(rs);
				DbUtil.close(pstmt);
				DbUtil.close(conn);
			}
			
			return pageModel;
		}
	}

       通过细节上的完善，增强用户体验度。对用户来说用起来更加便利了，对程序设计者来说，更好地通过职能去实现智能，因为程序本身就是一个找规律的事情。程序设计就是通过总结规律，实现规律的可重复性。找出更多的的规律，在合适的时候执行，在增强用户体验度的同时，增强了职能。