<script>function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}</script>
自己寫了段小代碼， 希望可以供大家學習和參考。 代碼里沒有太多注釋， 有時間的話我會補充上去。
自己在寫動態生成DataTable的時候也查閱了很多相關文章， 以及實現固定表頭等等。
在解決固定表頭問題上我是用的兩張表（加行標是3張表）實現的， 因為我發現如果用JSF1.1的化實現固定表頭幾乎不可能（如果有人有好的想法， 比如用JS比較在行的朋友請告訴我解決方法， 謝謝）
實現給每個Header加上一個CommandLink的時候我遇到了很大的問題， 就是無論如何我動態生成的這些CommandLink都沒有辦法觸發事件（并不報錯）， 這個問題足足折磨了我3天。。。
最后終于發現問題的所在， 是因為我在生成CommandLink的時候沒有給每個CommandLink SetID。。。 就加上這句話，問題立馬解決。
我原來的代碼是鏈接數據庫的， 但是這樣的化大家也沒有辦法參考， 所以我對代碼少繳修改， 就算是個小例子吧， 可重用。
希望大家對我的代碼提出寶貴意見，一起進步，謝謝。
截圖：
Dynamic.jsp
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->
<%
@tagliburi
=
"
http://java.sun.com/jsf/core
"
prefix
=
"
f
"
%>
<% @tagliburi = " 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 ="PleaseEnter:" /> </ 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;" >
<!-- Table1start -->
<!-- Table1end -->
</ td >
< td >
<!-- Table2start -->
< Div ID ="Table2"
STYLE ="position:relative;top:0;border-left:0.5ptsolidblack;border-right:0.5ptsolidblack;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 >
<!-- Table2end -->
</ td >
</ tr >
< tr >
< td STYLE ="vertical-align:top;" >
<!-- Table3start -->
< Div ID ="Table3"
STYLE ="border-bottom:0.5ptsolidblack;border-top:0.5ptsolidblack;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 >
<!-- Table3end -->
</ td >
< td STYLE ="vertical-align:top;" >
<!-- Table4start -->
< 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 >
<!-- Table4end -->
</ td >
</ tr >
</ table >
</ h:form >
</ body >
</ f:view >
</ html >
<% @tagliburi = " 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 ="PleaseEnter:" /> </ 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;" >
<!-- Table1start -->
<!-- Table1end -->
</ td >
< td >
<!-- Table2start -->
< Div ID ="Table2"
STYLE ="position:relative;top:0;border-left:0.5ptsolidblack;border-right:0.5ptsolidblack;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 >
<!-- Table2end -->
</ td >
</ tr >
< tr >
< td STYLE ="vertical-align:top;" >
<!-- Table3start -->
< Div ID ="Table3"
STYLE ="border-bottom:0.5ptsolidblack;border-top:0.5ptsolidblack;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 >
<!-- Table3end -->
</ td >
< td STYLE ="vertical-align:top;" >
<!-- Table4start -->
< 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 >
<!-- Table4end -->
</ td >
</ tr >
</ table >
</ h:form >
</ body >
</ f:view >
</ html >
MyBean.java
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->
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 HtmlDataTabledynamicDataTable;
private HtmlDataTableheaderDataTable;
private HtmlDataTablenumDataTable;
private static int tempWidth = 30 ;
// LoadDatafromDataBasetoEveryDataTable--------------------------------
public void loadMyList() throws Exception{
myList = new ArrayList < List < String >> ();
int row = 25 ;
while (row > 0 ){
int column = 25 ;
Stringstr = " o " ;
List < String > tmpvector = new ArrayList < String > ();
while (column > 0 ){
tmpvector.add(str);
column -- ;
}
row -- ;
myList.add(tmpvector);
}
}
public void loadMyHeader() throws Exception{
myHeader = new ArrayList < List < String >> ();
Stringstr = " ***** " ;
int column = 25 ;
List < String > tmpvector = new ArrayList < String > ();
while (column > 0 ){
tmpvector.add(str);
column -- ;
}
myHeader.add(tmpvector);
}
public void loadMyNum() throws Exception{
myNum = new ArrayList < List < Integer >> ();
int row = 0 ;
while (row < 25 ){
List < Integer > tmpvector = new ArrayList < Integer > ();
tmpvector.add(row);
myNum.add(tmpvector);
row ++ ;
}
}
// initializeEveryDataTabletotheFront-------------------------------------
public void populateDynamicDataTable(){
if (myList != null && myList.size() > 0 ){
dynamicDataTable = new HtmlDataTable();
int columns = ((List)myList.get( 0 )).size();
System.out.println( " DisplayCloumn: " + columns); //
for ( int i = 0 ;i < columns;i ++ ){
ValueBindingmyItem = FacesContext.getCurrentInstance().getApplication().createValueBinding( " #{myItem[ " + i + " ]} " );
UIColumncolumn = new UIColumn();
HtmlOutputTextoutputText = new HtmlOutputText();
outputText.setValueBinding( " value " ,myItem);
outputText.setStyle( " width: " + tempWidth + "" );
column.getChildren().add(outputText);
column.setId( " col_ " + i); // YoushouldsetIDofeverycomponentwhichyoucreateintheBacking-Bean.
dynamicDataTable.getChildren().add(column);
}
}
}
public void populateHeaderDataTable(){
if (myHeader != null && myHeader.size() > 0 ){
headerDataTable = new HtmlDataTable();
int columns = ((List)myHeader.get( 0 )).size();
FacesContextfacesContext = FacesContext.getCurrentInstance();
Applicationapplication = facesContext.getApplication();
for ( int i = 0 ;i < columns;i ++ ){
HtmlCommandLinkcommandLink = (HtmlCommandLink)application.createComponent(HtmlCommandLink.COMPONENT_TYPE);
StringvalueBindingExpression = " #{myHeader[ " + i + " ]} " ;
ValueBindingvalueBinding = application.createValueBinding(valueBindingExpression);
commandLink.setValueBinding( " value " ,valueBinding);
commandLink.setId( " head_comankLink_ " + i); // Themostimportant!!!Ifyoudontputitnothingisgonnahappen.
commandLink.setStyle( " color:blue " );
commandLink.setStyle( " width: " + tempWidth + "" );
commandLink.getAttributes();
Class[]params = {ActionEvent. class };
MethodBindingactionListener = application.createMethodBinding( " #{myBean.setSelectedDocumentId} " ,params);
commandLink.setActionListener(actionListener);
commandLink.setImmediate( true );
UIColumncolumn = new UIColumn();
column.getChildren().add(commandLink);
column.setId( " head_ " + i);
headerDataTable.getChildren().add(column);
}
}
}
public void populateNumDataTable(){
if (myNum != null && myNum.size() > 0 ){
numDataTable = new HtmlDataTable();
UIOutputoutput = new UIOutput();
ValueBindingmyItem = FacesContext.getCurrentInstance().getApplication().createValueBinding( " #{myNum[0]} " );
output.setValueBinding( " value " ,myItem);
// Setcolumn.
UIColumncolumn = new UIColumn();
column.getChildren().add(output);
column.setId( " num " );
numDataTable.getChildren().add(column);
}
}
// TestActionsandActionListeners--------------------------------------------
public void setSelectedDocumentId(ActionEventevent) throws Exception
{
}
// Getters-------------------------------------------------------------------
public HtmlDataTablegetDynamicDataTable() throws Exception{
if (dynamicDataTable == null ){
loadMyList(); // Reloadtogetmostrecentdata.
populateDynamicDataTable();
}
return dynamicDataTable;
}
public HtmlDataTablegetHeaderDataTable() throws Exception{
if (headerDataTable == null ){
loadMyHeader(); // Reloadtogetmostrecentdata.
populateHeaderDataTable();
}
return headerDataTable;
}
public HtmlDataTablegetNumDataTable() throws Exception{
if (numDataTable == null ){
loadMyNum(); // Reloadtogetmostrecentdata.
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(HtmlDataTabledynamicDataTable){
this .dynamicDataTable = dynamicDataTable;
}
public void setHeaderDataTable(HtmlDataTableheaderDataTable){
this .headerDataTable = headerDataTable;
}
public void setMyHeader(List < List < String >> myHeader){
this .myHeader = myHeader;
}
public void setNumDataTable(HtmlDataTablenumDataTable){
this .numDataTable = numDataTable;
}
public void setMyNum(List < List < Integer >> myNum){
this .myNum = myNum;
}
public void setMyList(List < List < String >> myList){
this .myList = myList;
}
}
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 HtmlDataTabledynamicDataTable;
private HtmlDataTableheaderDataTable;
private HtmlDataTablenumDataTable;
private static int tempWidth = 30 ;
// LoadDatafromDataBasetoEveryDataTable--------------------------------
public void loadMyList() throws Exception{
myList = new ArrayList < List < String >> ();
int row = 25 ;
while (row > 0 ){
int column = 25 ;
Stringstr = " o " ;
List < String > tmpvector = new ArrayList < String > ();
while (column > 0 ){
tmpvector.add(str);
column -- ;
}
row -- ;
myList.add(tmpvector);
}
}
public void loadMyHeader() throws Exception{
myHeader = new ArrayList < List < String >> ();
Stringstr = " ***** " ;
int column = 25 ;
List < String > tmpvector = new ArrayList < String > ();
while (column > 0 ){
tmpvector.add(str);
column -- ;
}
myHeader.add(tmpvector);
}
public void loadMyNum() throws Exception{
myNum = new ArrayList < List < Integer >> ();
int row = 0 ;
while (row < 25 ){
List < Integer > tmpvector = new ArrayList < Integer > ();
tmpvector.add(row);
myNum.add(tmpvector);
row ++ ;
}
}
// initializeEveryDataTabletotheFront-------------------------------------
public void populateDynamicDataTable(){
if (myList != null && myList.size() > 0 ){
dynamicDataTable = new HtmlDataTable();
int columns = ((List)myList.get( 0 )).size();
System.out.println( " DisplayCloumn: " + columns); //
for ( int i = 0 ;i < columns;i ++ ){
ValueBindingmyItem = FacesContext.getCurrentInstance().getApplication().createValueBinding( " #{myItem[ " + i + " ]} " );
UIColumncolumn = new UIColumn();
HtmlOutputTextoutputText = new HtmlOutputText();
outputText.setValueBinding( " value " ,myItem);
outputText.setStyle( " width: " + tempWidth + "" );
column.getChildren().add(outputText);
column.setId( " col_ " + i); // YoushouldsetIDofeverycomponentwhichyoucreateintheBacking-Bean.
dynamicDataTable.getChildren().add(column);
}
}
}
public void populateHeaderDataTable(){
if (myHeader != null && myHeader.size() > 0 ){
headerDataTable = new HtmlDataTable();
int columns = ((List)myHeader.get( 0 )).size();
FacesContextfacesContext = FacesContext.getCurrentInstance();
Applicationapplication = facesContext.getApplication();
for ( int i = 0 ;i < columns;i ++ ){
HtmlCommandLinkcommandLink = (HtmlCommandLink)application.createComponent(HtmlCommandLink.COMPONENT_TYPE);
StringvalueBindingExpression = " #{myHeader[ " + i + " ]} " ;
ValueBindingvalueBinding = application.createValueBinding(valueBindingExpression);
commandLink.setValueBinding( " value " ,valueBinding);
commandLink.setId( " head_comankLink_ " + i); // Themostimportant!!!Ifyoudontputitnothingisgonnahappen.
commandLink.setStyle( " color:blue " );
commandLink.setStyle( " width: " + tempWidth + "" );
commandLink.getAttributes();
Class[]params = {ActionEvent. class };
MethodBindingactionListener = application.createMethodBinding( " #{myBean.setSelectedDocumentId} " ,params);
commandLink.setActionListener(actionListener);
commandLink.setImmediate( true );
UIColumncolumn = new UIColumn();
column.getChildren().add(commandLink);
column.setId( " head_ " + i);
headerDataTable.getChildren().add(column);
}
}
}
public void populateNumDataTable(){
if (myNum != null && myNum.size() > 0 ){
numDataTable = new HtmlDataTable();
UIOutputoutput = new UIOutput();
ValueBindingmyItem = FacesContext.getCurrentInstance().getApplication().createValueBinding( " #{myNum[0]} " );
output.setValueBinding( " value " ,myItem);
// Setcolumn.
UIColumncolumn = new UIColumn();
column.getChildren().add(output);
column.setId( " num " );
numDataTable.getChildren().add(column);
}
}
// TestActionsandActionListeners--------------------------------------------
public void setSelectedDocumentId(ActionEventevent) throws Exception
{
}
// Getters-------------------------------------------------------------------
public HtmlDataTablegetDynamicDataTable() throws Exception{
if (dynamicDataTable == null ){
loadMyList(); // Reloadtogetmostrecentdata.
populateDynamicDataTable();
}
return dynamicDataTable;
}
public HtmlDataTablegetHeaderDataTable() throws Exception{
if (headerDataTable == null ){
loadMyHeader(); // Reloadtogetmostrecentdata.
populateHeaderDataTable();
}
return headerDataTable;
}
public HtmlDataTablegetNumDataTable() throws Exception{
if (numDataTable == null ){
loadMyNum(); // Reloadtogetmostrecentdata.
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(HtmlDataTabledynamicDataTable){
this .dynamicDataTable = dynamicDataTable;
}
public void setHeaderDataTable(HtmlDataTableheaderDataTable){
this .headerDataTable = headerDataTable;
}
public void setMyHeader(List < List < String >> myHeader){
this .myHeader = myHeader;
}
public void setNumDataTable(HtmlDataTablenumDataTable){
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
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->
<?
xmlversion="1.0"encoding="UTF-8"
?>
<! DOCTYPEfaces-configPUBLIC"-//SunMicrosystems,Inc.//DTDJavaServerFacesConfig1.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 >
<! DOCTYPEfaces-configPUBLIC"-//SunMicrosystems,Inc.//DTDJavaServerFacesConfig1.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
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->
.orders
{
border : thinsolidblack ;
}
.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 ;
}
border : thinsolidblack ;
}
.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
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
