JSF: 动态生成的DataTable， 固定表头， 固定行标，

自己写了段小代码， 希望可以供大家学习和参考。 代码里没有太多注释， 有时间的话我会补充上去。

自己在写动态生成DataTable的时候也查阅了很多相关文章， 以及实现固定表头等等。

在解决固定表头问题上我是用的两张表（加行标是3张表）实现的， 因为我发现如果用JSF1.1的化实现固定表头几乎不可能（如果有人有好的想法， 比如用JS比较在行的朋友请告诉我解决方法， 谢谢）

实现给每个Header加上一个CommandLink的时候我遇到了很大的问题， 就是无论如何我动态生成的这些CommandLink都没有办法触发事件（并不报错）， 这个问题足足折磨了我3天。。。

最后终于发现问题的所在， 是因为我在生成CommandLink的时候没有给每个CommandLink SetID。。。 就加上这句话，问题立马解决。

我原来的代码是链接数据库的， 但是这样的化大家也没有办法参考， 所以我对代码少缴修改， 就算是个小例子吧， 可重用。

希望大家对我的代码提出宝贵意见，一起进步，谢谢。

截图：



Dynamic.jsp


<%
@ taglib uri
=
" http://java.sun.com/jsf/core "
prefix
=
"
f
"
%>

<%
@ taglib uri
=
" http://java.sun.com/jsf/html "
prefix
=
"
h
"
%>

<
Script
language
="JavaScript"
>

var
tdW;

//
Scroll

function
f_scroll(Col_T,Row_T,DivNm){

if
(Col_T
!=
''){
document.getElementById(Col_T).scrollLeft
=
document.getElementById(DivNm).scrollLeft;
}

if
(Row_T
!=
''){
document.getElementById(Row_T).scrollTop
=
document.getElementById(DivNm).scrollTop;
}
}

</
Script
>

<
html
>

<
f:view
>

<
head
>

<
title
>
TABLE
</
title
>

<
link
rel
="stylesheet"
type
="text/css"
href
="styles.css"
>

</
head
>

<
body
>

<
h:form
>

<
font
size
="2"
color
="black"

style
="position:absolute; left: 35; top: 5; width:200; height:20"
>

<
h:outputText
value
="Please Enter:"

/>

</
font
>

<
h:inputText
value
=""
size
="20"

style
="position:absolute; left: 110; top: 5; width:150; height:20"

/>

<
h:commandButton
value
="Search"
action
=""

style
="position:absolute; left: 270; top: 5; width:50; height:20"

/>

<
table
BORDER
=0

STYLE
="POSITION: ABSOLUTE; LEFT: 0px; TOP: 30px; right: 0px; bottom: 0px;"
>

<
tr
>

<
td
STYLE
="text-align: right;"
>

<!--
Table1 start
-->

<!--
Table1 end
-->

</
td
>

<
td
>

<!--
Table2 start
-->

<
Div
ID
="Table2"

STYLE
="position: relative; top: 0; border-left: 0.5pt solid black; border-right: 0.5pt solid black; height: 17.75px; width: 285px; overflow-x: hidden;"
>

<
h:dataTable
value
="#{myBean.myHeader}"
var
="myHeader"

binding
="#{myBean.headerDataTable}"
bgcolor
="white"
border
="1"

cellspacing
="1"
rendered
="true"
styleClass
="orders"

headerClass
="ordersHeader"
rowClasses
="evenColumn,oddColumn"

style
="position:absolute; left: 0; top: 0; width: 100; height: 10; border-collapse:collapse;"

id
="ree"
>

</
h:dataTable
>

</
Div
>

<!--
Table2 end
-->

</
td
>

</
tr
>

<
tr
>

<
td
STYLE
="vertical-align: top;"
>

<!--
Table3 start
-->

<
Div
ID
="Table3"

STYLE
="border-bottom: 0.5pt solid black; border-top: 0.5pt solid black; width: 25.5px; height: 265px; overflow-y: hidden; position: relative; left: 0;"
>

<
h:dataTable
value
="#{myBean.myNum}"
var
="myNum"

binding
="#{myBean.numDataTable}"
bgcolor
="white"
border
="1"

cellspacing
="1"
rendered
="true"
styleClass
="orders"

headerClass
="ordersHeader"
rowClasses
="evenColumn,oddColumn"

style
="position:absolute; left: 0; top: 0; width: 32; height: 5; border-collapse:collapse;"

id
="dee"
>

</
h:dataTable
>

</
Div
>

<!--
Table3 end
-->

</
td
>

<
td
STYLE
="vertical-align: top;"
>

<!--
Table4 start
-->

<
Div
ID
="Table4"
onScroll
="f_scroll('Table2','Table3','Table4');"

STYLE
="height: 281px; width: 300px; overflow-y: scroll; overflow-x: scroll;"
>

<
h:dataTable
value
="#{myBean.myList}"
var
="myItem"

binding
="#{myBean.dynamicDataTable}"
bgcolor
="white"
border
="1"

cellspacing
="1"
rendered
="true"
styleClass
="orders"

headerClass
="ordersHeader"
rowClasses
="evenColumn,oddColumn"

style
="position:absolute; left: 0; top: 0; width: 100; height: 5; border-collapse:collapse;"
>

</
h:dataTable
>

</
Div
>

<!--
Table4 end
-->

</
td
>

</
tr
>

</
table
>

</
h:form
>

</
body
>

</
f:view
>

</
html
>

MyBean.java


package
mypackage;

import
java.util.ArrayList;

import
java.util.List;

import
javax.faces.application.Application;

import
javax.faces.component.UIColumn;

import
javax.faces.component.UIOutput;

import
javax.faces.component.html.HtmlCommandLink;

import
javax.faces.component.html.HtmlDataTable;

import
javax.faces.component.html.HtmlOutputText;

import
javax.faces.context.FacesContext;

import
javax.faces.el.MethodBinding;

import
javax.faces.el.ValueBinding;

import
javax.faces.event.ActionEvent;

public

class
MyBean {

private
List
<
List
<
String
>>
myList;

private
List
<
List
<
String
>>
myHeader;

private
List
<
List
<
Integer
>>
myNum;

private
HtmlDataTable dynamicDataTable;

private
HtmlDataTable headerDataTable;

private
HtmlDataTable numDataTable;

private

static

int
tempWidth
=

30
;

//
Load Data from DataBase to Every DataTable --------------------------------

public

void
loadMyList()
throws
Exception {

myList
=

new
ArrayList
<
List
<
String
>>
();

int
row
=

25
;

while
(row
>

) {

int
column
=

25
;

String str
=

"
o
"
;

List
<
String
>
tmpvector
=

new
ArrayList
<
String
>
();

while
(column
>

) {

tmpvector.add(str);

column
--
;
}
row
--
;

myList.add(tmpvector);
}
}

public

void
loadMyHeader()
throws
Exception {

myHeader
=

new
ArrayList
<
List
<
String
>>
();

String str
=

"
*****
"
;

int
column
=

25
;

List
<
String
>
tmpvector
=

new
ArrayList
<
String
>
();

while
(column
>

) {

tmpvector.add(str);

column
--
;
}
myHeader.add(tmpvector);
}

public

void
loadMyNum()
throws
Exception {

myNum
=

new
ArrayList
<
List
<
Integer
>>
();

int
row
=

;

while
(row
<

25
) {

List
<
Integer
>
tmpvector
=

new
ArrayList
<
Integer
>
();

tmpvector.add(row);

myNum.add(tmpvector);

row
++
;
}
}

//
initialize Every DataTable to the Front-------------------------------------

public

void
populateDynamicDataTable() {

if
(myList
!=

null

&&
myList.size()
>

) {

dynamicDataTable
=

new
HtmlDataTable();

int
columns
=
((List) myList.get(

)).size();

System.out.println(
"
DisplayCloumn:
"

+
columns);
//

for
(
int
i
=

; i
<
columns; i
++
) {

ValueBinding myItem
=
FacesContext.getCurrentInstance().getApplication().createValueBinding(
"
#{myItem[
"

+
i
+

"
]}
"
);

UIColumn column
=

new
UIColumn();

HtmlOutputText outputText
=

new
HtmlOutputText();

outputText.setValueBinding(
"
value
"
, myItem);

outputText.setStyle(
"
width:
"

+
tempWidth
+

""
);

column.getChildren().add(outputText);

column.setId(
"
col_
"

+
i);
//
You should set ID of every component which you create in the Backing-Bean .

dynamicDataTable.getChildren().add(column);
}
}
}

public

void
populateHeaderDataTable() {

if
(myHeader
!=

null

&&
myHeader.size()
>

) {

headerDataTable
=

new
HtmlDataTable();

int
columns
=
((List) myHeader.get(

)).size();

FacesContext facesContext
=
FacesContext.getCurrentInstance();

Application application
=
facesContext.getApplication();

for
(
int
i
=

; i
<
columns; i
++
) {

HtmlCommandLink commandLink
=
(HtmlCommandLink) application.createComponent(HtmlCommandLink.COMPONENT_TYPE);

String valueBindingExpression
=

"
#{myHeader[
"

+
i
+

"
]}
"
;
ValueBinding valueBinding
=
application.createValueBinding(valueBindingExpression);
commandLink.setValueBinding(
"
value
"
, valueBinding);

commandLink.setId(
"
head_comankLink_
"

+
i);
//
The most important!!! If you dont put it nothing is gonna happen.

commandLink.setStyle(
"
color: blue
"
);

commandLink.setStyle(
"
width:
"

+
tempWidth
+

""
);

commandLink.getAttributes();

Class[] params
=
{ ActionEvent.
class
};
MethodBinding actionListener
=
application.createMethodBinding(
"
#{myBean.setSelectedDocumentId}
"
, params);
commandLink.setActionListener(actionListener);

commandLink.setImmediate(
true
);

UIColumn column
=

new
UIColumn();
column.getChildren().add(commandLink);
column.setId(
"
head_
"

+
i);

headerDataTable.getChildren().add(column);
}
}
}

public

void
populateNumDataTable() {

if
(myNum
!=

null

&&
myNum.size()
>

) {

numDataTable
=

new
HtmlDataTable();

UIOutput output
=

new
UIOutput();

ValueBinding myItem
=
FacesContext.getCurrentInstance().getApplication().createValueBinding(
"
#{myNum[0]}
"
);

output.setValueBinding(
"
value
"
, myItem);

//
Set column.

UIColumn column
=

new
UIColumn();
column.getChildren().add(output);
column.setId(
"
num
"
);

numDataTable.getChildren().add(column);
}
}

//
Test Actions and ActionListeners--------------------------------------------

public

void
setSelectedDocumentId(ActionEvent event)
throws
Exception
{

}

//
Getters -------------------------------------------------------------------

public
HtmlDataTable getDynamicDataTable()
throws
Exception {

if
(dynamicDataTable
==

null
) {

loadMyList();
//
Reload to get most recent data.

populateDynamicDataTable();
}

return
dynamicDataTable;
}

public
HtmlDataTable getHeaderDataTable()
throws
Exception {

if
(headerDataTable
==

null
) {

loadMyHeader();
//
Reload to get most recent data.

populateHeaderDataTable();
}

return
headerDataTable;
}

public
HtmlDataTable getNumDataTable()
throws
Exception {

if
(numDataTable
==

null
) {

loadMyNum();
//
Reload to get most recent data.

populateNumDataTable();
}

return
numDataTable;
}

public
List
<
List
<
Integer
>>
getMyNum() {

return
myNum;
}

public
List
<
List
<
String
>>
getMyHeader() {

return
myHeader;
}

public
List
<
List
<
String
>>
getMyList() {

return
myList;
}

//
Setters -------------------------------------------------------------------

public

void
setDynamicDataTable(HtmlDataTable dynamicDataTable) {

this
.dynamicDataTable
=
dynamicDataTable;
}

public

void
setHeaderDataTable(HtmlDataTable headerDataTable) {

this
.headerDataTable
=
headerDataTable;
}

public

void
setMyHeader(List
<
List
<
String
>>
myHeader) {

this
.myHeader
=
myHeader;
}

public

void
setNumDataTable(HtmlDataTable numDataTable) {

this
.numDataTable
=
numDataTable;
}

public

void
setMyNum(List
<
List
<
Integer
>>
myNum) {

this
.myNum
=
myNum;
}

public

void
setMyList(List
<
List
<
String
>>
myList) {

this
.myList
=
myList;
}
}

faces-config.xml


<?
xml version="1.0" encoding="UTF-8"
?>

<!
DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"
>

<
faces-config
>

<
managed-bean
>

<
managed-bean-name
>
myBean
</
managed-bean-name
>

<
managed-bean-class
>
mypackage.MyBean
</
managed-bean-class
>

<
managed-bean-scope
>
session
</
managed-bean-scope
>

</
managed-bean
>

</
faces-config
>

styles.css


.orders
{

border
:
thin solid black
;

}

.ordersHeader
{

text-align
:
center
;

font-style
:

;

color
:
Snow
;

font-size
:
12px
;

background
:
Teal
;

}

.evenColumn
{

text-align
:
center
;

font-size
:
12px
;

background
:
#F0FFFF
;

}

.oddColumn
{

text-align
:
center
;

font-size
:
12px
;

background
:
white
;

}

转自：http://blog.csdn.net/wsfeiyuan/archive/2008/11/19/3332694.aspx

$(document).ready(function(){dp.SyntaxHighlighter.HighlightAll('code');});

原文链接：
http://blog.csdn.net/vanessa219/article/details/3901123