JSF動態生成固定表頭和行標的DataTable

作者：網絡 2009-06-23 11:23:13

開發后端

本文介紹JSF動態生成固定表頭和行標的DataTable，固定表頭，固定行標，點擊表頭可排序, 希望可以供大家學習和參考。

這個例子在jsf1.1下通過。JSF動態生成DataTable，希望可以供大家學習和參考。

自己在寫JSF動態生成DataTable的時候也查閱了很多相關文章，以及實現固定表頭等等。

在解決固定表頭問題上我是用的兩張表（加行標是3張表）實現的，因為我發現如果用JSF1.1的化實現固定表頭幾乎不可能（如果有人有好的想法，比如用JS比較在行的朋友請告訴我解決方法，謝謝）

實現給每個Header加上一個CommandLink的時候我遇到了很大的問題，就是無論如何通過JSF動態生成的這些CommandLink都沒有辦法觸發事件（并不報錯），這個問題足足折磨了我3天。。。

***終于發現問題的所在，是因為我在生成CommandLink的時候沒有給每個CommandLink SetID。。。就加上這句話，問題立馬解決。

我原來的代碼是鏈接數據庫的，但是這樣的化大家也沒有辦法參考，所以我對代碼少加修改，就算是個小例子吧，可重用。

希望大家對我的代碼提出JSF動態生成固定表頭和行標的DataTable的意見，一起進步，謝謝。

<%@ 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>TABLEtitle>
<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;">
td>
<td>
<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>
td>
tr>
<tr>
<td STYLE="vertical-align: top;">
<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>
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>

【編輯推薦】

JSF2中Ajax事件和錯誤
簡述JSF程序配置
Java開發三劍客JSF2.0、EJB3.1、JPA2.0現狀及發展
在JSF/JSP中集成FCKEditor
JSF+Seam框架學習心得

責任編輯：佚名來源：中國IT實驗室

DataTable JSF動態生成