JSF中为dataTable组件指定自定义行样式

 

 

HtmlDataTable组件属于UIData家族的HTML数据列表实现，组件中提供了rowStyleClass等方法来控制行的显示,，如果你在rowStyleClass中加入两个样式类，并使用逗号分开，那么渲染的每一行会交替使用这两个样式类进行显示，同理多个样式类也会循环交替显示。
                                                                                     ) q, v$ o2 Y# E) @
     但是如果我想根据业务的情况具体指定某行显示成特定的样式，HtmlDataTable就无能为力了，然而这种业务又很常见，比如我想高亮显示列表中时间过期的行等等......
 8 Z: U5 ^+ e$ N/ E6 O; V
     下面是一个例子,显示了我的藏书列表，我想让计算机类书籍的行使用红色背景，文学类书籍的行使用白色背景，经济学类书籍的行使用蓝色列表。9 Q7 a) c, T1 `2 X+ c2 j8 z
 
     1.首先是Book模型4 X- \/ g# a# `
 0 Y% ^: x% S, p, f8 e6 W7 D
    package net.blogjava.fangshun.book;1 `8 I6 v" U( O% r# }3 M2 g
 
import java.io.Serializable;6 X$ L# R5 C, M6 @
 import java.util.ArrayList;
 import java.util.List;
 4 I. }( j0 K, D1 x4 L% K, ~. P
 import javax.faces.model.SelectItem;1 N- K+ _  D0 ^* r( M" E
 % W% [/ A8 a0 A* P5 Y
 /** *//**
 * 书籍模型
 * @author shun.fang( }/ k4 O: w+ c8 Q' k
 *
 */
 public/ K) Y0 \4 ~+ m- @
 class Book implements Serializable {
     private
 int id;    //书籍编号" L  W' \3 Z% K# }) l! d# O
 5 \3 f3 G7 e/ q! Z) n& h
 private String name; //书籍名称( r' R9 m7 L7 O- N
 & e! ]4 X/ Q0 I& _
 private
 int type; //书籍类型
    
    public Book() {+ i: l$ J' c" N- ]# E' n! F
         - n6 r2 d1 ], z3 [+ J1 I' x8 X0 f8 @9 A
     }
    
    /** *//**
      * type* O7 y' d8 K$ I' O! |4 s  f
      * @param id
      * @param name
      * @param type
      */0 v2 S' j9 G- n) i" F& {' O
     public Book(int id, String name, int type) {
         // TODO Auto-generated constructor stub4 K" P7 U, h" k) ^( ~: b
 
this.id = id;
         this.name = name;, A7 C$ i: v; q( A( _" B. J  v4 q7 c
         this.type = type;
     }
    
    public
 int getId() {; r8 ~0 R9 a, v7 {' r# P( a) U+ Q
         return id;
     }- K) {4 n# Z, q# t! t$ b
     public: u+ W- {+ D+ M9 a& e( W  A6 W
 void setId(int id) {- c  K, B1 x3 D) M
         this.id = id;
     }
     public String getName() {' a2 D0 O4 B- k$ i
         return name;8 N7 d+ w* z1 |4 o) S& x8 s% ^$ `4 o
     }
     public4 N4 R% a$ p& g/ i5 g
 void setName(String name) {. \0 L- ]: x( j6 A7 ]
         this.name = name;% `7 |3 l7 r0 J( S4 b
     }
     public  v* R' @1 [( p$ j- Z
 int getType() {0 K+ d( Z( h1 ^* V
         return type;
     }+ z3 G& Z0 }" U2 m4 @: C/ K$ w
     public1 Z9 W* [% r. c. l& @' \( B
 void setType(int type) {
         this.type = type;  k) q& r# n, X- x
     }
 

 

public static final int COMPUTER_BOOK = 1;    //计算机类
    
    public static final int ART_BOOK = 2;        //文学类6 h9 `7 j2 z* T0 k# v
     - E3 t! L+ S) P# v) G/ L# u
     public static final int ECONOMY_BOOK = 3;     //经济类
    
   
    private List<SelectItem> items;
    
    /** *//**/ ^4 J+ N" s' Z; U& J  |
      * 为下拉菜单提供模拟数据
      * @return
      */
     public List<SelectItem> getItems() {
         if(items == null) {/ R6 ~4 U. n# P) F0 K
             items = new ArrayList<SelectItem>();
            
             SelectItem item = new SelectItem();
             item.setLabel("计算机类");; l3 @# `& h& T: J. W, y1 n
             item.setValue(COMPUTER_BOOK);9 n) Z) A3 D9 l; ]' n5 f" ^
             items.add(item);9 L, b5 ^3 Q  X0 q' \- |3 t) i0 k* q; w
            
             item = new SelectItem();
             item.setLabel("文学类");# ?0 p6 u4 U, _1 a
             item.setValue(ART_BOOK);
             items.add(item);! n, y* E9 t4 F$ k. ]. J) m% C
            
             item = new SelectItem();
             item.setLabel("经济学类");0 N' x  d1 X2 C9 p, Z' ]$ X- r3 [
             item.setValue(ECONOMY_BOOK);: I3 b( o. W6 n1 [/ {0 Q0 U
             items.add(item);
         }& Q+ a5 h7 F, d  e
         return items;2 B1 G% D- b: Q, q
     }. Q' j8 \/ p2 B
 }

 

 

 

 

 

 

2. book的列表模型6 e8 S2 o' d3 N" z
 
package net.blogjava.fangshun.book;
 % ~8 ~# X; Q- U3 i: C' t, r
 import java.io.Serializable;
 import java.util.ArrayList;
 import java.util.Collection;
 import java.util.HashMap;$ v  u) \  H7 Y! h3 f. v- z
 import java.util.List;
 import java.util.Map;
 
import javax.faces.component.UIData;0 O$ E" u( Z& N! J
 import javax.faces.model.ListDataModel;
 
/** *//**
 * 书籍列表模型2 h( o0 v- x# D* n
 * @author shun.fang
 *
 */+ i) u2 q" a1 _/ N) n; H( y
 public class BookList implements Serializable {
     //    绑定使用此BookList作为数据源的UIData组件，常使用的是HtmlDataTable这个实现组件
     //  这样可以通过调用BookList模型来间接访问到HtmlDataTable组件，以便控制组件
     //    内部的状态' ]' g; s0 \/ b! P- f! n3 q( J
     private UIData uiData;   
   
    private ListDataModel books;
 $ X( }% A0 N2 g
     //UIData组件的values属性可以直接读取DataModel家族的对象6 q( q. S" d" M0 @! W
     //这里没有返回Collection集合对象，是为了在自定义的BookListDataModel
     //对象中控制UIData组件的状态' d0 k  u5 W% K# \4 c1 _
     public ListDataModel getBooks() {
         if(books == null) {
            
             books = new BookListDataModel(createBooks());
         }+ I2 @! G, k# Z1 L7 i3 p
         return books;8 q( M% P7 z! W$ \7 ]- ]: J
     }
 7 f5 E4 G6 Y1 H) j+ ]8 y0 d# ~
     public void setBooks(ListDataModel books) {1 M) K8 g; }# r8 q2 d7 X8 c, g
         this.books = books;
     }) I0 }, x7 z% M" X) q
 2 {- T$ ?( k  V# r* A* |' T" I+ [& k
     public UIData getUiData() {
         return uiData;- o: W% [- ~0 G+ o/ Q# E2 M
     }
 1 h  L: H- b! ]& v" T
     public void setUiData(UIData uiData) {
         this.uiData = uiData;+ w0 n/ X# c& x7 ]9 D+ }5 v
     }
    
    /** *//**
      * 创建模拟数据! b" w2 I2 P5 J& _; e& l1 s; L0 F
      * @return    List<Book>
      */
     public List<Book> createBooks() {
         //使用HashMap是为了打乱数据的排序$ I1 E) T, x. ?0 }7 f& Y' _
         Map<Integer, Book> bs = new HashMap<Integer, Book>();
           }# k( M8 N2 t9 F
         for(int i = 0; i < 50; i++) {
             bs.put(i, new Book(i, "book_" + i, (i%3+1)));
         }0 D! f9 {' _" }4 Y, _
         ; f# ^3 ?& w  o# G2 K
         List<Book> lst = new ArrayList<Book>();" b: U) t& W0 h& Y
         lst.addAll(bs.values());
         return lst;: D1 K6 R6 Y3 i# o1 Z* l- _
     }  {' m9 ~: B# a0 Q/ L
 }

 

 

 

 

回复 引用 TOP
.

 

 

 

 

 

 

 

 

3. 自定义的数据模型
 " `) \' J6 z5 \( g0 j/ B4 I& U
 ' M: Z# t  ?" ^4 B/ U0 n+ [: U- C
 
package net.blogjava.fangshun.book;
 ( U, T4 k2 r, d' H8 a1 `
 import java.util.List;
 - g: H* @4 @/ n, A" J8 a! {% U
 import javax.faces.context.FacesContext;. K* G6 l. n2 x. C- i
 import javax.faces.el.VariableResolver;- e; v5 t+ V" R. K
 import javax.faces.model.ListDataModel;
 
import org.apache.myfaces.component.html.ext.HtmlDataTable;' Z- K3 L+ a' Z# ?3 A+ E1 d
 " z3 E# S( \; n3 C, y4 U8 T
 /** *//**
 * 集成了ListDataModel为Book模型提供自定义样式的支持
 * @author shun.fang( d8 X5 r9 ?9 H2 }) @
 *
 */
 public class BookListDataModel extends ListDataModel {' R2 g7 ]3 b$ ?
    
    public BookListDataModel(List<Book> books) {/ Y) B1 u' X: h( D' ~
         super(books);
     }- d  |% `! p+ Y$ o% g/ A$ O
     3 U! b' N2 C, q4 o( W9 U( `% N
     /** *//**) \; ?  E5 j& j( Y
      * 覆写了DataModel对象的getRowData方法，每次uiData组件从模型列表获取新一行记录
      * 的时候，是从这里发起的，所以在这里可以通过获取uiData组件，来对uiData组件的状态进行! x2 |! C' K7 ~$ e4 @
      * 调整。目前的调整就是根据业务的需要对uiData组件的每一行样式进行特殊指定。8 t7 |  V- w2 V; X
      */! a# K! s* I2 W6 K8 S
     @Override
     public Object getRowData() {
         // TODO Auto-generated method stub' a7 ^( ~* V# l$ D1 F1 U. o8 N
        
         /6 Q; U+ C* l' O) `& L6 D
         //通过变量解析获取request scope中的BookList列表模型
         FacesContext facesContext = FacesContext.getCurrentInstance();
         VariableResolver vr = facesContext.getApplication().getVariableResolver();$ L: o8 E4 u/ Q0 C: V
         BookList bookList = (BookList)vr.resolveVariable(facesContext, "booking");    , u4 A# ~* O+ A0 h2 m: e1 [! e
         /+ U5 s: Z9 U9 u, |. K# j
        
         //间接得到绑定BookList列表模型的uiData组件，并向下转型成HtmlDataTable（myfaces扩展类型）组件
         HtmlDataTable table = (HtmlDataTable)bookList.getUiData();% m" ]9 T4 g/ _* B
        
         //获取当前行的Book实例
         Book book = (Book)super.getRowData();
         5 A# f6 _1 s3 r9 |* Z
         //根据当前行Book实例的业务特征为HtmlDataTable组件设置渲染行样式
         setCurrentRowStyle(table, book.getType());
         5 n3 `! ]' S4 D/ ~2 r# x
         return book;
     }
     ' q: k0 K  J* X3 Z" a8 D
     /** *//**3 I6 Z; L( Y  r/ `( [
      * 根据不同的类型，设置当前行的样式
      * @param table4 n( c+ C5 j+ {! R7 U3 [& a. V: u
      * @param type; X6 e" t2 d0 t! N
      */3 F5 a& E1 z" O* T3 [" `
     private void setCurrentRowStyle(HtmlDataTable table, int type) {
         switch (type) {
             case Book.COMPUTER_BOOK:
                 //System.out.println("computers");/ R* k5 `8 s9 `
                 table.setRowStyleClass("computers");    //设置计算机书籍样式
                 break;' w2 c+ w6 W! R1 E1 H" V$ O
             case Book.ART_BOOK:
                 //System.out.println("arts");
                 table.setRowStyleClass("arts");        //设置文学书籍样式
                 break;2 u; F# h. Z- ]! C( C5 r, y! d
             case Book.ECONOMY_BOOK:( O2 l; y$ H; R4 A7 c& s
                 //System.out.println("C");( B4 `- g: t. q  o
                 table.setRowStyleClass("economy");        //设置经济书籍样式
                 break;
             default:, u0 p# j7 V$ c& l' M- c
                 break;
         }
     }( I$ k- M, s4 m; g; S' @9 V5 Y
 }

 

 

 

<?xml version="1.0" encoding="UTF-8"?>
 <jsp:root
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:h="http://java.sun.com/jsf/html"5 l& ]& c* L, P  r2 }0 C) E
     xmlns:jsp="http://java.sun.com/JSP/Page"+ u4 S' }1 s' b1 V' y  y' n
     xmlns:t="http://myfaces.apache.org/tomahawk": l9 {& a1 O$ a. y8 Y" c& Z
     version="2.0">
   <jsp:directive.page session="false"/ V. L9 |! p. b* O( q
                       contentType="text/html;charset=UTF-8"1 b, k( A6 W+ t! u# W
                       pageEncoding="UTF-8"/>! E' v) [) m  d9 V7 N; ^
   <jsp:output doctype-public="-//W3C//DTD XHTML 1.1//EN"
               doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
               doctype-root-element="html" omit-xml-declaration="true"/>/ A& J: w7 g4 A
   <f:view>
     <html xmlns="http://www.w3.org/1999/xhtml">& H" T. j! c3 j( S5 w" E
     <head>
       <meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>
       <title>特定样式</title># F: J+ l8 d: E; \
       <style>- i8 \) f& C7 F6 a% d
               .computers  {
                   background-color: red;
               }
             .arts {
                   background-color: white;
               }3 p) o: q- R$ I3 M1 H; g% I3 M" u
              
               .economy {$ r. D; \$ x9 c* y" ^
                   background-color: blue;7 E2 h+ U  [& b5 I7 Y
               }
              
       </style>+ o9 j( A& l+ P# {3 W$ F9 c
     </head>9 o/ x2 |$ q9 G7 H2 I' e% H
     <body>
       <h:form>2 @" v+ o+ A9 O8 Y- b% a& z" a5 u8 j
         <t:dataTable id="book"7 @' v6 a* W& _8 s
                        var="bk"
                        rowStyleClass="computers" ( R( D' x% X, g; E5 l
                        binding="#{booking.uiData}") \3 u' B0 P9 }2 J/ g9 M
                        value="#{booking.books}">
           <t:column>
             <f:facet name="header">
               <h:outputText value="编号"/>
             </f:facet>
             <h:outputText value="#{bk.id}"></h:outputText>          4 q$ }) b$ \1 o
           </t:column>
           " |1 H4 f' S7 k$ K9 t
           <t:column>
             <f:facet name="header">  {6 y" {& }2 @. ?
               <h:outputText value="书名"/>2 J, q. }: J" _& @& o
             </f:facet>
             <h:outputText value="#{bk.name}"></h:outputText>          $ X/ k) I, J: y+ F7 J; D, p
           </t:column>
           <t:column>
             <f:facet name="header">
               <h:outputText value="类别"/>" f" Z; E& T% S6 E7 D$ z$ @
             </f:facet>" f/ n3 c- ]0 V' J  l2 [% f
             <t:selectOneMenu value="#{bk.type}" displayValueOnly="true" >9 [) X3 |. H: U  b/ l. r
                 <f:selectItems value="#{book.items}"/># ?% R3 c* s4 z
             </t:selectOneMenu>           
           </t:column>6 W7 L+ w, V- l! x- F) }1 z# u/ ?8 `
         </t:dataTable>
     </h:form>) v1 ^+ J! p( ^& Z* `. d% D
     </body>
     </html>
   </f:view>$ U3 w& v8 }- s! I
 </jsp:root>

 

 

 

 

5.简要配置
     <managed-bean>
     <managed-bean-name>book</managed-bean-name>+ y" x( z1 y' @- Z8 ~( `  r, }& _
     <managed-bean-class>net.blogjava.fangshun.book.Book</managed-bean-class>
     <managed-bean-scope>request</managed-bean-scope>
   </managed-bean>) Y5 Y8 E/ W' E; A# D
   8 S, v3 Z+ p7 }
    <managed-bean>
     <managed-bean-name>booking</managed-bean-name>
     <managed-bean-class>net.blogjava.fangshun.book.BookList</managed-bean-class>4 w- D) j7 ]5 t  w8 V3 Z
     <managed-bean-scope>request</managed-bean-scope>
   </managed-bean>

 

 

 

 

 

 

 

6.显示效果 ) t0 k+ Q, [. y8 q) e1 r" K& x
    编号 书名 类别 ; H* ^2 w/ L4 d- f, k# m$ a: v
 15 book_15 计算机类 8 Q0 p3 O! B& t+ y0 ~; j
 30 book_30 计算机类 & |$ |; U2 T1 F  n1 q0 A
 43 book_43 文学类 ) g7 L7 @$ r, Y: C7 P
 16 book_16 文学类
31 book_31 文学类 5 W: ]& \; a1 M5 F$ ?
 48 book_48 计算机类
32 book_32 经济学类
34 book_34 文学类 3 ^: N8 {* {6 x% b6 b1 z: L, k5 O
 41 book_41 经济学类
1 book_1 文学类
0 book_0 计算机类 ) y6 X5 b& G( @3 ?( ^! i6 ?