您的位置: 首页  >  文章  >  JSF: 动态生成的DataTable， 固定表头， 固定行标

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

分类: 文章 • 2023-11-11 19:04:04

<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)+'&amp;u='+escape(d.location.href)+'&amp;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。。。 就加上这句话，问题立马解决。

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

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

截图：
JSF: 动态生成的DataTable， 固定表头， 固定行标
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"%>
<Scriptlanguage="JavaScript">
vartdW;
//Scroll
functionf_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>
<linkrel="stylesheet"type="text/css"href="styles.css">
</head>
<body>
<h:form>
<fontsize="2"color="black"
style="position:absolute;left:35;top:5;width:200;height:20">
<h:outputTextvalue="PleaseEnter:"/></font>

<h:inputTextvalue=""size="20"
style="position:absolute;left:110;top:5;width:150;height:20"/>

<h:commandButtonvalue="Search"action=""
style="position:absolute;left:270;top:5;width:50;height:20"/>

<tableBORDER=0
STYLE="POSITION:ABSOLUTE;LEFT:0px;TOP:30px;right:0px;bottom:0px;">
<tr>
<tdSTYLE="text-align:right;">
<!--Table1start-->
<!--Table1end-->
</td>

<td>
<!--Table2start-->
<DivID="Table2"
STYLE="position:relative;top:0;border-left:0.5ptsolidblack;border-right:0.5ptsolidblack;height:17.75px;width:285px;overflow-x:hidden;">
<h:dataTablevalue="#{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>
<tdSTYLE="vertical-align:top;">
<!--Table3start-->
<DivID="Table3"
STYLE="border-bottom:0.5ptsolidblack;border-top:0.5ptsolidblack;width:25.5px;height:265px;overflow-y:hidden;position:relative;left:0;">
<h:dataTablevalue="#{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>

<tdSTYLE="vertical-align:top;">
<!--Table4start-->
<DivID="Table4"onScroll="f_scroll('Table2','Table3','Table4');"
STYLE="height:281px;width:300px;overflow-y:scroll;overflow-x:scroll;">
<h:dataTablevalue="#{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>-->packagemypackage;

importjava.util.ArrayList;
importjava.util.List;

importjavax.faces.application.Application;
importjavax.faces.component.UIColumn;
importjavax.faces.component.UIOutput;
importjavax.faces.component.html.HtmlCommandLink;
importjavax.faces.component.html.HtmlDataTable;
importjavax.faces.component.html.HtmlOutputText;
importjavax.faces.context.FacesContext;
importjavax.faces.el.MethodBinding;
importjavax.faces.el.ValueBinding;
importjavax.faces.event.ActionEvent;

publicclassMyBean{

privateList<List<String>>myList;

privateList<List<String>>myHeader;

privateList<List<Integer>>myNum;

privateHtmlDataTabledynamicDataTable;

privateHtmlDataTableheaderDataTable;

privateHtmlDataTablenumDataTable;

privatestaticinttempWidth=30;

//LoadDatafromDataBasetoEveryDataTable--------------------------------
publicvoidloadMyList()throwsException{

myList=newArrayList<List<String>>();

introw=25;

while(row>0){

intcolumn=25;

Stringstr="o";

List<String>tmpvector=newArrayList<String>();

while(column>0){

tmpvector.add(str);

column--;
}
row--;

myList.add(tmpvector);
}
}

publicvoidloadMyHeader()throwsException{

myHeader=newArrayList<List<String>>();

Stringstr="*****";

intcolumn=25;

List<String>tmpvector=newArrayList<String>();

while(column>0){

tmpvector.add(str);

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

publicvoidloadMyNum()throwsException{

myNum=newArrayList<List<Integer>>();

introw=0;

while(row<25){

List<Integer>tmpvector=newArrayList<Integer>();

tmpvector.add(row);

myNum.add(tmpvector);

row++;
}
}

//initializeEveryDataTabletotheFront-------------------------------------
publicvoidpopulateDynamicDataTable(){

if(myList!=null&&myList.size()>0){

dynamicDataTable=newHtmlDataTable();

intcolumns=((List)myList.get(0)).size();

System.out.println("DisplayCloumn:"+columns);//

for(inti=0;i<columns;i++){

ValueBindingmyItem=FacesContext.getCurrentInstance().getApplication().createValueBinding("#{myItem["+i+"]}");

UIColumncolumn=newUIColumn();

HtmlOutputTextoutputText=newHtmlOutputText();

outputText.setValueBinding("value",myItem);

outputText.setStyle("width:"+tempWidth+"");

column.getChildren().add(outputText);

column.setId("col_"+i);//YoushouldsetIDofeverycomponentwhichyoucreateintheBacking-Bean.

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

publicvoidpopulateHeaderDataTable(){

if(myHeader!=null&&myHeader.size()>0){

headerDataTable=newHtmlDataTable();

intcolumns=((List)myHeader.get(0)).size();

FacesContextfacesContext=FacesContext.getCurrentInstance();

Applicationapplication=facesContext.getApplication();

for(inti=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=newUIColumn();
column.getChildren().add(commandLink);
column.setId("head_"+i);

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

publicvoidpopulateNumDataTable(){

if(myNum!=null&&myNum.size()>0){

numDataTable=newHtmlDataTable();

UIOutputoutput=newUIOutput();

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

output.setValueBinding("value",myItem);

//Setcolumn.
UIColumncolumn=newUIColumn();
column.getChildren().add(output);
column.setId("num");

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

//TestActionsandActionListeners--------------------------------------------

publicvoidsetSelectedDocumentId(ActionEventevent)throwsException
{

}

//Getters-------------------------------------------------------------------
publicHtmlDataTablegetDynamicDataTable()throwsException{
if(dynamicDataTable==null){

loadMyList();//Reloadtogetmostrecentdata.

populateDynamicDataTable();
}
returndynamicDataTable;
}

publicHtmlDataTablegetHeaderDataTable()throwsException{
if(headerDataTable==null){

loadMyHeader();//Reloadtogetmostrecentdata.

populateHeaderDataTable();
}
returnheaderDataTable;
}

publicHtmlDataTablegetNumDataTable()throwsException{
if(numDataTable==null){

loadMyNum();//Reloadtogetmostrecentdata.

populateNumDataTable();
}
returnnumDataTable;
}

publicList<List<Integer>>getMyNum(){
returnmyNum;
}

publicList<List<String>>getMyHeader(){
returnmyHeader;
}

publicList<List<String>>getMyList(){
returnmyList;
}

//Setters-------------------------------------------------------------------
publicvoidsetDynamicDataTable(HtmlDataTabledynamicDataTable){
this.dynamicDataTable=dynamicDataTable;
}

publicvoidsetHeaderDataTable(HtmlDataTableheaderDataTable){
this.headerDataTable=headerDataTable;
}

publicvoidsetMyHeader(List<List<String>>myHeader){
this.myHeader=myHeader;
}

publicvoidsetNumDataTable(HtmlDataTablenumDataTable){
this.numDataTable=numDataTable;
}

publicvoidsetMyNum(List<List<Integer>>myNum){
this.myNum=myNum;
}

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


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;

}

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

相关推荐