JSF動(dòng)態(tài)生成固定表頭和行標(biāo)的DataTable
作者：網(wǎng)絡(luò)
本文介紹JSF動(dòng)態(tài)生成固定表頭和行標(biāo)的DataTable，固定表頭， 固定行標(biāo)， 點(diǎn)擊表頭可排序, 希望可以供大家學(xué)習(xí)和參考。
這個(gè)例子在jsf1.1下通過。JSF動(dòng)態(tài)生成DataTable， 希望可以供大家學(xué)習(xí)和參考。
自己在寫JSF動(dòng)態(tài)生成DataTable的時(shí)候也查閱了很多相關(guān)文章， 以及實(shí)現(xiàn)固定表頭等等。
在解決固定表頭問題上我是用的兩張表（加行標(biāo)是3張表）實(shí)現(xiàn)的， 因?yàn)槲野l(fā)現(xiàn)如果用JSF1.1的化實(shí)現(xiàn)固定表頭幾乎不可能（如果有人有好的想法， 比如用JS比較在行的朋友請(qǐng)告訴我解決方法， 謝謝）
實(shí)現(xiàn)給每個(gè)Header加上一個(gè)CommandLink的時(shí)候我遇到了很大的問題， 就是無論如何通過JSF動(dòng)態(tài)生成的這些CommandLink都沒有辦法觸發(fā)事件（并不報(bào)錯(cuò)）， 這個(gè)問題足足折磨了我3天。。。
***終于發(fā)現(xiàn)問題的所在， 是因?yàn)槲以谏蒀ommandLink的時(shí)候沒有給每個(gè)CommandLink SetID。。。 就加上這句話，問題立馬解決。
我原來的代碼是鏈接數(shù)據(jù)庫(kù)的， 但是這樣的化大家也沒有辦法參考， 所以我對(duì)代碼少加修改， 就算是個(gè)小例子吧， 可重用。
希望大家對(duì)我的代碼提出JSF動(dòng)態(tài)生成固定表頭和行標(biāo)的DataTable的意見，一起進(jìn)步，謝謝。
- <%@ 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>
【編輯推薦】
責(zé)任編輯：佚名
來源：
中國(guó)IT實(shí)驗(yàn)室
