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 ?