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

最新推荐文章于 2023-01-02 14:49:08 发布

iteye_1176

最新推荐文章于 2023-01-02 14:49:08 发布

阅读量260

点赞数

文章标签： java javascript 数据库 ViewUI

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

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

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

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

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

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

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

截图：

Dynamic.jsp

<% @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;" >


</ td >

< td >

< 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 >

</ td >
</ tr >

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

< 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 >

</ td >

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

< 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 >

</ 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 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

<? 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 >

styles.css

.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 ;

}

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