JSP表格模板升级（4）-- 表头和表尾固定的表格模板

        上文《JSP表格模板升级（3）--可变列数的表格模板》已经完成了一个功能几近完善的表格模板，直接可以用于大部分二维表格的显示需求。本文中我们将改变表格底层的实现，将table标签替换为更加灵活的div+css。关于两种实现形式孰优孰劣目前尚无绝对的说法，而灵活性方面，显然是div+css的方式更胜一筹，例如本文将实现一个固定表头和表尾的表格模板。

        数据结构部分依然不变，主要的变化是展示层的，jsp中表格的定义如下所示，其中list存储类型为KeyValueListBean（定义见上文）的一组数据：

<div class="myTable">
    <div>
        <div class="tr">
            <div class="td th"> </div>
            <c:forEach items="${list[0].value}" var="ch">
                <div class="td th">${ch}</div>
            </c:forEach>
        </div>
    </div>
   
    <div class="body">
        <c:forEach items="${list}" var="row"varStatus="status" begin="1"end="${fn:length(list)-2}">
            <div class="tr ${status.index%2== 0?'odd':'even'}">
                <div class="td">${row.key}</div>
                <c:forEach items="${row.value}" var="col">
                    <div class="td">${col}</div>
                </c:forEach>
            </div>
        </c:forEach>
    </div>
   
    <div>
        <c:forEach items="${list}" var="row"begin="${fn:length(list)-1}">
            <div class="tr">
                <div class="td tb">${row.key}</div>
                <c:forEach items="${row.value}" var="col">
                    <div class="td tb">${col}</div>
                </c:forEach>
            </div>
        </c:forEach>
    </div>
</div>

        为便于理解，这里给出最终生成的表格的div结构示意：

<div class="myTable">
    <div><!--表头部分-->
        <div class="tr">
            <div class="td th"> </div>
            <div class="td th">表头1</div>
            <div class="td th">表头2</div>
            <div class="td th">表头3</div>
            …………
        </div>
    </div>
   
    <div class="body"><!--表格主体部分-->
        <div class="tr odd>
            <div class="td">行1</div>
            <div class="td">数据1.1</div>
            <div class="td">数据1.2</div>
            <div class="td">数据1.3</div>
        </div>
        <div class="tr even>
            <div class="td">行2</div>
            <div class="td">数据2.1</div>
            <div class="td">数据2.2</div>
            <div class="td">数据2.3</div>
        </div>
        ……………
    </div>
   
    <div><!--表尾部分-->
        <div class="tr">
            <div class="td tb">总计</div>
            <div class="td tb">表尾1</div>
            <div class="td tb">表尾2</div>
            <div class="td tb">表尾3</div>
        </div>
    </div>
</div>

        这是对一个表格各个部分的简单组合，完全依据其视觉结构来定义，类名参照table那一套标签的名字，然后定义相应的css样式：

    .myTable {
        width: auto;
        border: 2px solid #eee;
    }
   
    .myTable div{
        text-align: center;
        margin-right: 1px;
        margin-bottom: 1px;
        line-height: 25px;
        height:25px;
        font-size: 12px;
    }
    /*固定高度的关键：表格主体部分设定最大高度或固定高度，并指定overflow-y属性为自动*/
    .myTable div.body{
        overflow-y:auto;
        height:auto;
        max-height:400px;
    }
    /*表格元素浮动，并指定一定的宽度*/
    .myTable div.td{
        float: left;
        width: 65px;
    }
    /*隔行变色*/
    .myTable div.odd.td{
        background:#E9EDF4;
    }
    .myTable div.even.td{
        background:#D0D8E8;
    }
    /*表头表尾的样式*/
    .myTable div.tb,.myTable div.th{
        background:#4F81BD;
        font-weight:bold;
    }
   
    .myTable div.tb {
        color:white;
    }
   
    /*防止滚动条影响布局*/
    .myTable div.tr{
        width:100%;
        margin-right:20px;
    }
   
    /*调整每行第一个元素的宽度*/
    .myTable div.trdiv:first-child {
        width:100px;
    }

        通过上述样式，我们就定义了一个表格内容最高400像素的表格模板，超过400像素之后表头和表尾行固定，表格主体内容可以滚动。当然我们可以将.body的样式中，max-height换为height，这样就得到了一个固定高度，固定表头和表尾的表格，不过笔者认为相较而言，上述示例代码中的样式更加实用。

        本文完成的jsp表格模板的完整代码如下：

<%@ page language="java"contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"prefix="c" %>
<%@ taglib prefix="fn"uri="http://java.sun.com/jsp/jstl/functions"%>
 
<%@ page import="com.reports.util.ReportFunctions"%>
<%@ page import="com.reports.util.SpringContextHolder"%>
<%@ page import="com.reports.charts.bean.KeyValueListBean"%>
<%@ page import="java.lang.reflect.Method"%>
<%@ page import="java.util.*"%>
<style type="text/css">
   
    .myTable {
        width: auto;
        border: 2px solid #eee;
    }
   
    .myTable div{
        text-align: center;
        margin-right: 1px;
        margin-bottom: 1px;
        line-height: 25px;
        height:25px;
        font-size: 12px;
    }
    .myTable div.body{
        overflow-y:auto;
        height:auto;
        max-height:400px;
    }
    .myTable div.td{
        float: left;
        width: 65px;
    }
   
    .myTable div.odd.td{
        background:#E9EDF4;
    }
    .myTable div.even.td{
        background:#D0D8E8;
    }
    .myTable div.tb, .myTable div.th{
        background:#4F81BD;
        font-weight:bold;
    }
   
    .myTable div.tb {
        color:white;
 
    }
   
    /*防止滚动条影响布局*/
    .myTable div.tr{
        width:100%;
        margin-right:20px;
    }
   
    .myTable div.trdiv:first-child {
        width:100px;
    }
</style>
<%
    Stringzoneid = request.getParameter("zoneid");
    Mapm = request.getParameterMap();
    System.out.println("the request map is:"+ m);
   
    ReportFunctionsreportF = SpringContextHolder.getBean(ReportFunctions.class);
    Methodmethod = null;
    List<KeyValueListBean>list = null;
    if(null != zoneid){
        method= reportF.getClass().getMethod(request.getParameter("method"), String.class, List.class);
       
        List<String>lc = newArrayList<String>();
        String[]ac = request.getParameter("categories").split(",");
        for(inti=0;i<ac.length;i++){
            lc.add(i,ac[i]);
        }
        list= (List<KeyValueListBean>)method.invoke(reportF, zoneid, lc);
    }else{
        method= reportF.getClass().getMethod(request.getParameter("method"));//param 'method' must be given
        list= (List<KeyValueListBean>)method.invoke(reportF);
    }
   
    /*自测数据
    List<KeyValueListBean>list = new ArrayList<KeyValueListBean>();
    List<String>tl = new ArrayList<String>();
    tl.add("elemenet");
    tl.add("entest");
    tl.add("hahah");
    KeyValueListBeantemp = new KeyValueListBean("test", tl);
    list.add(temp);
    list.add(temp);
    */
    request.setAttribute("list",  list);
   
%>
 
<div class="myTable">
    <div>
        <div class="tr">
            <div class="td th"> </div>
            <c:forEach items="${list[0].value}" var="ch">
                <div class="td th">${ch}</div>
            </c:forEach>
        </div>
    </div>
   
    <div class="body">
        <c:forEach items="${list}" var="row"varStatus="status" begin="1"end="${fn:length(list)-2}">
            <div class="tr ${status.index%2== 0?'odd':'even'}">
                <div class="td">${row.key}</div>
                <c:forEach items="${row.value}" var="col">
                    <div class="td">${col}</div>
                </c:forEach>
            </div>
        </c:forEach>
    </div>
   
    <div>
        <c:forEach items="${list}" var="row"begin="${fn:length(list)-1}">
            <div class="tr">
                <div class="td tb">${row.key}</div>
                <c:forEach items="${row.value}" var="col">
                    <div class="td tb">${col}</div>
                </c:forEach>
            </div>
        </c:forEach>
    </div>
</div>