商城项目后台表格的模板化处理办法

一：展示效果

 二：表格结构

1.表头的特殊处理

      <div class="content_main">
                 <!--breadcrumb面包屑-->
            <ol class="breadcrumb ptb15 plr20 clearfix">
                <li><a href="javascript:;" class="cursor_default">供销商管理</a></li>
                <li>&gt;</li>
                <li class="active"><a href="javascript:;">供销商数据统计</a></li>
              </ol>
            <!--breadcrumb面包屑-end-->
            <!-- 标题栏 start-->
            <h2 class="content_title">供销商数据统计</h2>
            <!-- 标题栏 end-->
            <!-- tab start -->
            <div class="tab_layout tab_item">
                <div class="tab_hd pt15">
                    <ul class="clearfix">
                        <li  class="active"><a href="${ctx}/terrace/suppiler/data">供销商数据统计</a></li>
                    </ul>
                </div>       
            <!-- 表单-start -->
           <form action="${ctx}/terrace/suppiler/total/list" id ="searchForm"  method="post" >
               <div class="clearfix plr20 pt20 pb5  bd_d_b">
                  <div class="clearfix fl">
                    <div class="form_control fl mr15 mb15 ">
                    <label>商品名称:</label>
                    <input class="w150" name="goodsName" type="text" />
                    </div>   
                    <div class="form_control fl mr15 mb15 ">
                    <label>类别:</label>
                   <select  id="genre" name="genre" class="w150 h32 wp15"  >
                     <option value="ALL">全部</option>
                     <option value="Distribution">分销商</option>
                     <option value="Store">门店</option>
                     <option value="Other">其它</option>
                    </select>
                    </div> 
                   <div class="form_control fl mr15 mb15">
                     <label>供销商:</label>
                     <select  class="w150 h32 "  >
                     <option>${supplier}</option>
                    </select>
                   </div>  
                    <div class="form_control fl mr10 mb15">
                        <label>时间:</label>
                        <input name="startTime" class="w180 Wdate" readonly onclick="WdatePicker();" type="text" />
                    <div class="fl mr10 mb15 lh32">-</div>
                    <div class="form_control fl mr15 mb15">
                      <input name="endTime" class="w180 Wdate" readonly onclick="WdatePicker();" type="text" />
                    </div>
                </div>
                <div class="fr">
                   <input type="button" class="btn btn_blue fr mb15" style="margin-left:10px" onClick="apply.doSearch();" value="开始搜索" />
                   <input type="button" class="btn btn_blue" value="重置"  onClick="tools.resetTable('${ctx}/terrace/suppiler/data')"/>
                </div>
                  <div class="table_control plr20 dataTable" style="padding-bottom: 100px;"></div>
              </div>   
            </form>
         </div>   
    </div>

 <form action="${ctx}/terrace/suppiler/total/list" id ="searchForm" method="post" >

这个action是表格中进行模糊查询的控制器地址,同时也是异步获取的数据地址。在表头上加载这个工具：

<script type="text/javascript" src="${ctx}/static/js/common/tools.js"></s

 这个js里面有个函数:

showList : function() {
		//更新表单提示层
		try {
		jQuery("#searchForm").validationEngine('hideAll');
		} catch (e) {
		}
		var params = $("#searchForm").serializeArray();
		var url
		if (tools.defaultUrl == "") {
			url = $("#searchForm").attr("action");
		} else {
			url = tools.defaultUrl;
		}
		$.ajax( {
			type : "POST",
			url : url,
			data : params,
			async : false,
			success : function(data) {
				$(".dataTable").html(data);
			}
		});
	}

 获取action的url,作为异步获取的方式。页面上同时也加载了这个js函数(方法是一个通用方法)，作为初始化:

$(function(){
    tools.showList();
    $("#searchForm").validationEngine({scroll:false});
});

执行之后将异步访问后台数据，后台接口如下:

    @RequestMapping(value = "/total/list")
    public ModelAndView suppilerData( OrderGoodsVo orderGoodsVo,Page<OrderGoodsVo> OrderGoodspage) {
        ModelMap map = new ModelMap();        
        //找到默认供应商
        ShiroUser shiro=ShiroUserUtil.getShiroUser();
        Suppiler suppiler=suppilerService.findSuppilerVoOne(shiro.getSuppliceId());
        
        orderGoodsVo.setSupplier(suppiler.getSupplierName());
        
        Page<OrderGoodsVo> page=suppilerService.queryOrderGoodsPage(orderGoodsVo,OrderGoodspage);
        System.out.println(page);
        Integer AllOrderSum=0;
        for(int i=0;i<page.getResult().size();i++){
            
                Integer  orderPrice=Integer.parseInt(page.getResult().get(i).getGoodsNums())*Integer.parseInt(page.getResult().get(i).getGoodsPrice());
                page.getResult().get(i).setOrderPrice(String.valueOf(orderPrice));
                 AllOrderSum=orderPrice+AllOrderSum;
               
        }
        System.out.println(AllOrderSum);
        map.put("page",page );
        map.put("AllOrderSum", String.valueOf(AllOrderSum));
        return new ModelAndView("/terrace/suppiler/suppilerDataList-total",map);
    }

表体的页面如下：

<h1 class="text_bold t_red">订单总额:${AllOrderSum}</h1>
<table class="pl20 pr20 table_normal" cellspacing="0" id="dataList">
    <thead>
            <th class="wp5">序号</th>
            <th class="wp10">商品名称</th>
            <th class="wp10">件数</th>
            <th class="wp10">商品金额</th>
            <th class="wp10">商品总额</th>
            <th class="wp10">类别</th>
            <th class="wp10">账号名称</th>
            <th class="wp10">日期</th>
        </tr>
     </thead>
   <tbody class="lh24">
   <c:if test="${empty page.result }">
  <tr class="js-del-par">
  <td colspan=8">暂无数据</td></tr>
          </tbody>
      </c:if>
   <c:if test="${ not empty page.result }">
   <c:forEach items="${page.result}" var="goods" varStatus="status">
          <tr>
           <td>${status.count }</td>
           <td>${goods.goodsName }</td>
           <td>${goods.goodsNums}</td>
           <td class="text_bold t_red"><fmt:formatNumber value="${goods.goodsPrice}" pattern="0.00"/></td>
            <td class="text_bold t_red"><fmt:formatNumber value="${goods.orderPrice }" pattern="0.00"/></td>
            <c:if test="${goods.isDistribution eq 'YES' }"> <td>分销商</td></c:if>
            <c:if test="${goods.isStore eq 'YES' }"><td>门店</td></c:if>
            <c:if test="${goods.isDistribution eq 'NO' && goods.isStore eq 'NO' }"><td>其它</td></c:if>
            <td>${goods.sellerName }</td>
           <td><fmt:formatDate value="${goods.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
           </tr>
          </c:forEach>
    </tbody>  
</table>
 <tags:pagination page="${page}" searchFn="tools.doSearch"></tags:pagination>

2.分页的通用方法

 2.1:pagination.tag：

<%@tag pageEncoding="UTF-8" import="java.lang.*" %>
<%@ attribute name="page" type="com.oaoera.agent.common.tools.Page"%>
<%@ attribute name="searchFn" type="java.lang.String"%>
<%@ attribute name="pageName" type="java.lang.String"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%

if(page==null){
	page = (com.oaoera.agent.common.tools.Page)request.getAttribute("page");
}
//page的名称
if(pageName==null||"".equals(pageName)){
	pageName = "page";
}

//当前页
int current =  page.getPageNumber();
//开始页数
int begin = Math.max(1, current - 3);
//结束页数
long end = Math.min(current+3, page.getTotalPages());
//总分页数
long totalPage = page.getTotalPages();

request.setAttribute("page", page);
request.setAttribute("totalPage", totalPage);
request.setAttribute("current", current);
request.setAttribute("pageName",pageName);
%>
<div class="clearfix">
<ul class="pagination fr mt10 mb10" pageName="${pageName}">
	<c:if test="${ empty pageFlag }">
	<div class="pageData" style="display:none">
		<input id="${pageName}_pageNumber" name="pageNumber" value="${page.pageNumber}"  />
		<input id="${pageName}_pageSize" name="pageSize" value="${page.pageSize}"  />
	</div>
	</c:if>
	<li><div class="page_div">总 <strong><%=page.getTotalCount()%></strong> 条记录</div></li>
	<% if (page.isHasPre()){%>
	<li class="previous">
		<a  style="cursor: pointer;"  href="javascript:void(0)" aria-label="Previous" pageNumber="<%=current-1%>">
			<span aria-hidden="true" pageNumber="<%=current-1%>">«</span>
		</a>
	</li>
	<%} %>
	<% if (begin > 3){%>
		<li><a  style="cursor: pointer;"  href="javascript:void(0)" pageNumber="1">1</a></li>
		<li><a  href="javascript:void(0)">...</a></li>
	<%} %>
	
	<%for (int i = begin; i <= end; i++) { %>
		<li><a style="cursor: pointer;"  href="javascript:void(0)" pageNumber="<%=i%>"><%=i%></a></li>
	<%} %>
	
	<% if (totalPage > 5 && end < totalPage){%>
		<li><a  href="javascript:void(0)">...</a></li>
		<li style="cursor: pointer;" ><a  href="javascript:void(0)" pageNumber="${totalPage }">${totalPage}</a></li>
	<%} %>
	
	<% if (page.isHasNext()){%>
	<li class="next_page">
		<a style="cursor: pointer;"  href="javascript:void(0)" aria-label="Next" pageNumber="<%=current+1%>">
			<span aria-hidden="true" pageNumber="<%=current+1%>">»</span>
		</a>
	</li>
	<%} %>
	<li>
        <div class="page_div">共<%=page.getTotalPages()%>页，到第<input type="text" name="goPageNumber" class="page_input" value="${current}" >页
        <input name="pageGoTo" type="button" class="ts_blue_btn_30 pageGoTo" value="确定"></div>
    </li>
 </ul>
 </div>
 <c:choose>
 <c:when test="${empty pageFlag}">
<script type="text/javascript">
	$(function(){
		var totalPage = parseInt('${totalPage}');
		$.${pageName} = {pageNumber: ${page.pageNumber},pageSize:${page.pageSize},toString:function(){
			return "&pageNumber="+this.pageNumber+"&pageSize="+this.pageSize;
		}};
		var $page=$.${pageName};
		var $pageUl = $("[pageName='${pageName}']");
		//页面中有可能会使用多个分页显示，但是数据只能保存一个，讲多余的input删除掉，只保留一个
		$(".pageData",$pageUl).each(function(i){
			if(i!=0){
				$(this).remove();
			}
		});
		
		$("[pageNumber]",$pageUl).unbind( "click" );
		$("[pageNumber]",$pageUl).click(function(){
			$page.pageNumber = parseInt($(this).attr("pageNumber"));
			//如果当前填的数值大于总页数就设置为totalPage
			$page.pageNumber = $page.pageNumber>totalPage?totalPage:$page.pageNumber;
			$("#${pageName}_pageNumber").val($page.pageNumber);
			//调用回调函数，将分页数据传递给客户端处理
			${searchFn}();
		});
		
		//点击确认按钮的操作
		$(".pageGoTo",$pageUl).click(function(){
			checkPageNumber($(this).prev("input"));
			if($(this).prev("input").val()=='')$(this).prev("input").val('${current}');
			$page.pageNumber = parseInt($(this).prev("input").val());
			//如果当前填的数值大于总页数就设置为totalPage
			$page.pageNumber = $page.pageNumber>totalPage?totalPage:$page.pageNumber;
			$("#${pageName}_pageNumber").val($page.pageNumber);
			${searchFn}();
		});
		
		//检查输入的pageNumber是否合法
		function checkPageNumber($input){
			//只能填数字
			var reg = new RegExp("^([1-9][0-9]*)$");  
			if(!reg.test($input.val())){
				$input.val("");
			}
		}
		
		$("[name='goPageNumber']",$pageUl).keyup(function(){
			checkPageNumber($(this));
		});
		$("a[pageNumber='${current}']",$pageUl).parent().addClass("active");
	});
</script>
<c:set var="pageFlag" scope="request" value="1"></c:set>
</c:when>
<c:otherwise>
<c:set var="pageFlag" scope="request" value=""></c:set>
</c:otherwise>
</c:choose>

 2.2:

page实体：

public class Page<T> implements Serializable {
	/**
	 * @Fields serialVersionUID : TODO（序列化）
	 */
	private static final long serialVersionUID = -6302766548537865236L;

	//-- 公共变量 --//
	public static final String ASC = "asc";

	public static final String DESC = "desc";

	//-- 分页参数 --//
	//分页号，默认是1
	protected int pageNumber = 1;

	//分页数，默认是10
	protected int pageSize = 15;

	protected String orderBy = null;

	protected String order = null;

	protected boolean autoCount = true;

	//-- 返回结果 --//
	protected List<T> result;

	protected long totalCount = -1;

	//-- 构造函数 --//
	public Page() {
	}

	/**
	 * <p>Title: toString</p>
	 * <p>Description: </p>
	 * @return
	 * @see java.lang.Object#toString()
	 */
	@Override
	public String toString() {
		return "Page [pageNumber=" + pageNumber + ", pageSize=" + pageSize + "]";
	}

	public Page(int pageSize, int pageNumber) {
		this.pageSize = pageSize;
		this.pageNumber = pageNumber;
	}

	//-- 分页参数访问函数 --//
	/**
	 * 获得当前页的页号,序号从1开始,默认为1.
	 */
	public int getPageNumber() {
		return pageNumber;
	}

	/**
	 * 设置当前页的页号,序号从1开始,低于1时自动调整为1.
	 */
	public void setPageNumber(final int pageNo) {
		this.pageNumber = pageNo;

		if (pageNo < 1) {
			this.pageNumber = 1;
		}
	}

	/**
	 * 返回Page对象自身的setPageNo函数,可用于连续设置。
	 */
	public Page<T> pageNo(final int thePageNo) {
		setPageNumber(thePageNo);
		return this;
	}

	/**
	 * 获得每页的记录数量, 默认为-1.
	 */
	public int getPageSize() {
		return pageSize;
	}

	/**
	 * 设置每页的记录数量.
	 */
	public void setPageSize(final int pageSize) {
		this.pageSize = pageSize;
	}

	/**
	 * 返回Page对象自身的setPageSize函数,可用于连续设置。
	 */
	public Page<T> pageSize(final int thePageSize) {
		setPageSize(thePageSize);
		return this;
	}

	/**
	 * 根据pageNo和pageSize计算当前页第一条记录在总结果集中的位置,序号从1开始.
	 */
	public int getFirst() {
		return ((pageNumber - 1) * pageSize) + 1;
	}

	/**
	 * 获得排序字段,无默认值. 多个排序字段时用','分隔.
	 */
	public String getOrderBy() {
		return orderBy;
	}

	/**
	 * 设置排序字段,多个排序字段时用','分隔.
	 */
	public void setOrderBy(final String orderBy) {
		this.orderBy = orderBy;
	}

	/**
	 * 返回Page对象自身的setOrderBy函数,可用于连续设置。
	 */
	public Page<T> orderBy(final String theOrderBy) {
		setOrderBy(theOrderBy);
		return this;
	}

	/**
	 * 获得排序方向, 无默认值.
	 */
	public String getOrder() {
		return order;
	}

	/**
	 * 设置排序方式向.
	 * 
	 * @param order 可选值为desc或asc,多个排序字段时用','分隔.
	 */
	public void setOrder(final String order) {
		String lowcaseOrder = StringUtils.lowerCase(order);

		//检查order字符串的合法值
		String[] orders = StringUtils.split(lowcaseOrder, ',');
		for (String orderStr : orders) {
			if (!StringUtils.equals(DESC, orderStr) && !StringUtils.equals(ASC, orderStr)) {
				throw new IllegalArgumentException("排序方向" + orderStr + "不是合法值");
			}
		}

		this.order = lowcaseOrder;
	}

	/**
	 * 返回Page对象自身的setOrder函数,可用于连续设置。
	 */
	public Page<T> order(final String theOrder) {
		setOrder(theOrder);
		return this;
	}

	/**
	 * 是否已设置排序字段,无默认值.
	 */
	public boolean isOrderBySetted() {
		return (StringUtils.isNotBlank(orderBy) && StringUtils.isNotBlank(order));
	}

	/**
	 * 获得查询对象时是否先自动执行count查询获取总记录数, 默认为false.
	 */
	public boolean isAutoCount() {
		return autoCount;
	}

	/**
	 * 设置查询对象时是否自动先执行count查询获取总记录数.
	 */
	public void setAutoCount(final boolean autoCount) {
		this.autoCount = autoCount;
	}

	/**
	 * 返回Page对象自身的setAutoCount函数,可用于连续设置。
	 */
	public Page<T> autoCount(final boolean theAutoCount) {
		setAutoCount(theAutoCount);
		return this;
	}

	//-- 访问查询结果函数 --//

	/**
	 * 获得页内的记录列表.
	 */
	public List<T> getResult() {
		return result;
	}

	/**
	 * 设置页内的记录列表.
	 */
	public void setResult(final List<T> result) {
		this.result = result;
	}

	/**
	 * 获得总记录数, 默认值为-1.
	 */
	public long getTotalCount() {
		return totalCount;
	}

	/**
	 * 设置总记录数.
	 */
	public void setTotalCount(final long totalCount) {
		this.totalCount = totalCount;
	}

	/**
	 * 根据pageSize与totalCount计算总页数, 默认值为-1.
	 */
	public long getTotalPages() {
		if (totalCount < 0) {
			return -1;
		}

		long count = totalCount / pageSize;
		if (totalCount % pageSize > 0) {
			count++;
		}
		return count;
	}

	/**
	 * 是否还有下一页.
	 */
	public boolean isHasNext() {
		return (pageNumber + 1 <= getTotalPages());
	}

	/**
	 * 取得下页的页号, 序号从1开始.
	 * 当前页为尾页时仍返回尾页序号.
	 */
	public int getNextPage() {
		if (isHasNext()) {
			return pageNumber + 1;
		} else {
			return pageNumber;
		}
	     }
	/**
	 * 是否还有上一页.
	 */
	public boolean isHasPre() {
		return (pageNumber - 1 >= 1);
	}

	/**
	 * 取得上页的页号, 序号从1开始.
	 * 当前页为首页时返回首页序号.
	 */
	public int getPrePage() {
		if (isHasPre()) {
			return pageNumber - 1;
		} else {
			return pageNumber;
		}
	}
}

 分页相关的参数都是咋tag里面进行提交的