关闭

JSP表格模板升级(4)-- 表头和表尾固定的表格模板

标签: java webjsp表格div+css模板
3268人阅读 评论(13) 收藏 举报
分类:

        上文《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>


2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:289568次
    • 积分:3735
    • 等级:
    • 排名:第8620名
    • 原创:60篇
    • 转载:5篇
    • 译文:8篇
    • 评论:164条
    文章分类
    最新评论