JSF动态生成固定表头和行标的DataTable
来源： 作者： 出处：综艺读书 2007-07-24 这个例子在jsf1.1下通过。JSF 动态生成DataTable， 固定表头， 固定行标， 点击表头可排序, 希望可以供大家学习和参考。
自己在写动态生成DataTable的时候也查阅了很多相关文章， 以及实现固定表头等等。
|
|
|||
实现给每个Header加上一个CommandLink的时候我遇到了很大的问题， 就是无论如何我动态生成的这些CommandLink都没有办法触发事件（并不报错）， 这个问题足足折磨了我3天。。。
最后终于发现问题的所在， 是因为我在生成CommandLink的时候没有给每个CommandLink SetID。。。 就加上这句话，问题立马解决。
我原来的代码是链接数据库的， 但是这样的化大家也没有办法参考， 所以我对代码少加修改， 就算是个小例子吧， 可重用。
希望大家对我的代码提出宝贵意见，一起进步，谢谢。
希望大家对我的代码提出宝贵意见，一起进步，谢谢。
Dynamic.jsp
<%@ 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>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="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;">
<!--Table1 start-->
<!--Table1 end-->
</td>
<td>
<!--Table2 start-->
<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>
<!--Table2 end-->
</td>
</tr>
<tr>
<td STYLE="vertical-align: top;">
<!--Table3 start-->
<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>
<!--Table3 end-->
</td>
<td STYLE="vertical-align: top;">
<!--Table4 start-->
<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>
<!--Table4 end-->
</td>
</tr>
</table>
</h:form>
</body>
</f:view>
</html>
<%@ 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>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="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;">
<!--Table1 start-->
<!--Table1 end-->
</td>
<td>
<!--Table2 start-->
<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>
<!--Table2 end-->
</td>
</tr>
<tr>
<td STYLE="vertical-align: top;">
<!--Table3 start-->
<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>
<!--Table3 end-->
</td>
<td STYLE="vertical-align: top;">
<!--Table4 start-->
<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>
<!--Table4 end-->
</td>
</tr>
</table>
</h:form>
</body>
</f:view>
</html>
相关图文阅读
频道图文推荐
相关专题
·AJAX+jsp无刷新验证码实例 (999次浏览)
·J2ME专业手机游戏开发基础 (132次浏览)
·集成Eclipse、Lomboz和JBoss开发J2EE应用 (65次浏览)
·利用JAVA编写的Web搜索程序 (48次浏览)
·利用J2ME开发无线蓝牙应用 (29次浏览)
·构建高性能J2EE应用的五种核心策略 (29次浏览)
·集成技术：.NET单挑J2EE (25次浏览)
·.NET与J2EE只能是敌人吗 (19次浏览)
·基于J2EE的分布式数据库 (17次浏览)
·解决J2EE系统应用性能问题常用方法 (15次浏览)
·J2ME专业手机游戏开发基础 (132次浏览)
·集成Eclipse、Lomboz和JBoss开发J2EE应用 (65次浏览)
·利用JAVA编写的Web搜索程序 (48次浏览)
·利用J2ME开发无线蓝牙应用 (29次浏览)
·构建高性能J2EE应用的五种核心策略 (29次浏览)
·集成技术：.NET单挑J2EE (25次浏览)
·.NET与J2EE只能是敌人吗 (19次浏览)
·基于J2EE的分布式数据库 (17次浏览)
·解决J2EE系统应用性能问题常用方法 (15次浏览)
·AJAX+jsp无刷新验证码实例 (999次浏览)
·对于Struts和Spring两种MVC框架的比较 (450次浏览)
·初学j2me必读 网友学习笔记 (178次浏览)
·J2ME专业手机游戏开发基础 (132次浏览)
·j2me创意--Wap浏览器的源代码 (131次浏览)
·J2EE基础篇 MVC模式和Struts模式的理解 (99次浏览)
·J2ME中读取Unicode和UTF-8编码文件 (98次浏览)
·Session机制使用的详细讲解 (86次浏览)
·GT4 开发：从头开始进行相互的身份验证 (73次浏览)
·集成Eclipse、Lomboz和JBoss开发J2EE应用 (65次浏览)
·对于Struts和Spring两种MVC框架的比较 (450次浏览)
·初学j2me必读 网友学习笔记 (178次浏览)
·J2ME专业手机游戏开发基础 (132次浏览)
·j2me创意--Wap浏览器的源代码 (131次浏览)
·J2EE基础篇 MVC模式和Struts模式的理解 (99次浏览)
·J2ME中读取Unicode和UTF-8编码文件 (98次浏览)
·Session机制使用的详细讲解 (86次浏览)
·GT4 开发：从头开始进行相互的身份验证 (73次浏览)
·集成Eclipse、Lomboz和JBoss开发J2EE应用 (65次浏览)
最新技术文档
·JSF动态生成固定表头和行标的DataTable 07-24
·JXTA下的媒体数据传输 07-21
·AJAX+jsp无刷新验证码实例 07-19
·利用J2ME开发无线蓝牙应用 07-08
·.NET与J2EE只能是敌人吗 07-08
·微软的.Net和Sun的J2EE如何对垒 07-08
·解决J2EE系统应用性能问题常用方法 07-07
·基于J2EE的分布式数据库 07-05
·构建高性能J2EE应用的五种核心策略 07-04
·利用JAVA编写的Web搜索程序 07-02
·JXTA下的媒体数据传输 07-21
·AJAX+jsp无刷新验证码实例 07-19
·利用J2ME开发无线蓝牙应用 07-08
·.NET与J2EE只能是敌人吗 07-08
·微软的.Net和Sun的J2EE如何对垒 07-08
·解决J2EE系统应用性能问题常用方法 07-07
·基于J2EE的分布式数据库 07-05
·构建高性能J2EE应用的五种核心策略 07-04
·利用JAVA编写的Web搜索程序 07-02
站内各频道最新更新文档
站内最新制作专题
热门关键字导读
站内频道文章精选
百度推荐，商机无限
搜索您感兴趣的内容