JSP table template upgrade (4) -- fixed table templates at the header and end of the table

The preceding JSP table template upgrade (3)-variable columns table template has completed a fully functional table template that can be directly used for display of most two-dimensional tables. In this article, we will change the underlying implementation of the table and replace the table label with a more flexible div + css. There is no absolute saying about the two implementation modes, which are superior or inferior. In terms of flexibility, it is obvious that div + css is superior. For example, this article will implement a table template with fixed headers and table tails.

The data structure remains unchanged. The main change is the presentation layer. The table definition in jsp is as follows. The list storage type is a set of data of KeyValueListBean (as defined above:

                                     
 
                  ${ch}            
                            
 
                              ${row.key}                
  
                       ${col}                
                      
                    
 
                              ${row.key}                
  
                       ${col}                
                      
     

For ease of understanding, the div structure of the final generated table is provided here:

    
 Header 1 header 2 header 3 ............
 Row 1 Data 1.1 data 1.2 data 1.3 rows 2 Data 2.1 data 2.2 Data 2.3 ...............
 Total table end 1 Table end 2 Table end 3

This is a simple combination of various parts of a table. It is defined based entirely on its visual structure. The class name refers to the name of the table set of labels and then defines the corresponding css style:

. 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 ;} /* Key to fixed height: set the maximum or fixed height for the table subject, and set the overflow-y attribute to automatic */. myTable div. body {overflow-y: auto; height: auto; max-height: 400px;}/* Table element floating, and specify a certain width */. myTable div. td {float: left; width: 65px;}/* the row is discolored */. myTable div. odd. td {background: # E9EDF4 ;}. myTable div. even. td {background: # D0D8E8;}/* style at the end of the header table */. myTable div. tb ,. myTable div. th {background: # 4F81BD; font-weight: bold ;}. myTable div. tb {color: white;}/* prevents the layout from being affected by the scroll bar */. myTable div. tr {width: 100%; margin-right: 20px;}/* adjust the width of the first element in each line */. myTable div. trdiv: first-child {width: 100px ;}

With the above style, we define a table template with a table content of up to 400 pixels. After more than 400 pixels, the header and the end row of the table are fixed, and the table body content can be rolled. Of course, we can. in the body style, the max-height is changed to the height, so that a table with a fixed height and a fixed header and table tail is obtained, the style in the above sample code is more practical.

<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + icagicagiccxvs7ezeqzybxeannwse0mizi2nj1_o8sjsow1xm3q1fu0 + sLryOfPwqO6PC9wPgo8cCBhbGlnbj0 = "left">

<% @ 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. * "%><% Stringzoneid = request. getParameter ("zoneid"); Mapm = request. getParameterMap (); System. out. println ("the request map is:" + m); ReportFunctionsreportF = SpringContextHolder. getBean (ReportFunctions. class); Methodmethod = null; List
 
  
List = null; if (null! = Zoneid) {method = reportF. getClass (). getMethod (request. getParameter ("method"), String. class, List. class); List
  
   
Lc = newArrayList
   
    
(); String [] ac = request. getParameter ("categories "). split (","); for (inti = 0; I) method. invoke (reportF, zoneid, lc);} else {method = reportF. getClass (). getMethod (request. getParameter ("method"); // param 'method' must be given list = (List
    
     
) Method. invoke (reportF);}/* Self-Test Data List
     
      
List = new ArrayList
      
        (); List
       
         Tl = new ArrayList
        
          (); Tl. add ("elemenet"); tl. add ("entest"); tl. add ("hahah"); KeyValueListBeantemp = new KeyValueListBean ("test", tl); list. add (temp); list. add (temp); */request. setAttribute ("list", list); %>
         
           $ {Ch}
          
         
           $ {Row. key}
          
            $ {Col}
           
          
         
           $ {Row. key}
          
            $ {Col}