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

开发 后端
本文介绍JSF动态生成固定表头和行标的DataTable,固定表头, 固定行标, 点击表头可排序, 希望可以供大家学习和参考。

这个例子在jsf1.1下通过。JSF动态生成DataTable, 希望可以供大家学习和参考。

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

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

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

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

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

希望大家对我的代码提出JSF动态生成固定表头和行标的DataTable的意见,一起进步,谢谢。

  1. <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> 
  2. <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> 
  3. <Script language="JavaScript"> 
  4.   var tdW;  
  5.   //Scroll  
  6.   function f_scroll(Col_T,Row_T,DivNm){  
  7.     if(Col_T!=''){  
  8.       document.getElementById(Col_T).scrollLeft = document.getElementById(DivNm).scrollLeft;  
  9.     }  
  10.     if(Row_T!=''){  
  11.       document.getElementById(Row_T).scrollTop = document.getElementById(DivNm).scrollTop;  
  12.     }  
  13.   }  
  14. Script> 
  15. <html> 
  16.  <f:view> 
  17.   <head> 
  18.    <title>TABLEtitle> 
  19.   <link rel="stylesheet" type="text/css" href="styles.css"> 
  20.  head> 
  21. <body> 
  22.  <h:form> 
  23.   <font size="2" color="black" 
  24.     style="position:absolute; left: 35; top: 5; width:200; height:20"> 
  25.       <h:outputText value="Please Enter:" /> font> 
  26.    <h:inputText value="" size="20" 
  27.       style="position:absolute; left: 110; top: 5; width:150; height:20" /> 
  28.    <h:commandButton value="Search" action="" 
  29.       style="position:absolute; left: 270; top: 5; width:50; height:20" />
  30. <table BORDER=0 
  31.       STYLE="POSITION: ABSOLUTE; LEFT: 0px; TOP: 30px; right: 0px; bottom: 0px;"> 
  32.    <tr> 
  33.       <td STYLE="text-align: right;"> 
  34.            
  35.             
  36.        td> 
  37.      <td> 
  38.           
  39.          <Div ID="Table2" 
  40.          STYLE="position: relative; top: 0; border-left: 0.5pt solid black;  
  41.             border-right: 0.5pt solid black; height: 17.75px; width: 285px; overflow-x: hidden;"> 
  42.           <h:dataTable value="#{myBean.myHeader}" var="myHeader" 
  43.               binding="#{myBean.headerDataTable}" bgcolor="white" border="1" 
  44.               cellspacing="1" rendered="true" styleClass="orders" 
  45.               headerClass="ordersHeader" rowClasses="evenColumn,oddColumn" 
  46.               style="position:absolute; left: 0; top: 0;   
  47.                     width: 100; height: 10; border-collapse:collapse;"  
  48.            id="ree"> 
  49.          h:dataTable> 
  50.        Div> 
  51.         
  52.     td> 
  53. tr> 
  54. <tr> 
  55.   <td STYLE="vertical-align: top;"> 
  56.       
  57.    <Div ID="Table3" 
  58.       STYLE="border-bottom: 0.5pt solid black; border-top: 0.5pt solid black;   
  59.        width: 25.5px; height: 265px; overflow-y: hidden; position: relative; left: 0;"> 
  60.     <h:dataTable value="#{myBean.myNum}" var="myNum" 
  61.        binding="#{myBean.numDataTable}" bgcolor="white" border="1" 
  62.        cellspacing="1" rendered="true" styleClass="orders" 
  63.        headerClass="ordersHeader" rowClasses="evenColumn,oddColumn" 
  64.        style="position:absolute; left: 0; top: 0; width: 32; height: 5; border-collapse:collapse;" 
  65.        id="dee"> 
  66.          h:dataTable> 
  67.            Div> 
  68.               
  69.           td> 
  70.           <td STYLE="vertical-align: top;"> 
  71.               
  72.           <Div ID="Table4" onScroll="f_scroll('Table2','Table3','Table4');" 
  73.              STYLE="height: 281px; width: 300px; overflow-y: scroll; overflow-x: scroll;"> 
  74.           <h:dataTable value="#{myBean.myList}" var="myItem" 
  75.               binding="#{myBean.dynamicDataTable}" bgcolor="white" border="1" 
  76.                cellspacing="1" rendered="true" styleClass="orders" 
  77.                headerClass="ordersHeader" rowClasses="evenColumn,oddColumn" 
  78.               style="position:absolute; left: 0; top: 0; width: 100;                                                                            height: 5; border-collapse:collapse;"> 
  79.              h:dataTable> 
  80.            Div> 
  81.               
  82.         td> 
  83.        tr> 
  84.       table> 
  85.      h:form> 
  86.     body> 
  87.   f:view> 
  88. html> 

【编辑推荐】

  1. JSF2中Ajax事件和错误
  2. 简述JSF程序配置
  3. Java开发三剑客JSF2.0、EJB3.1、JPA2.0现状及发展
  4. 在JSF/JSP中集成FCKEditor
  5. JSF+Seam框架学习心得
责任编辑:佚名 来源: 中国IT实验室
相关推荐

2011-06-30 16:24:38

Qt TableWidge

2009-06-22 14:22:41

JSF和Tapestr

2009-06-26 13:48:57

G4JSFGWTJSF

2009-06-26 10:43:57

生成EXCELJSF

2009-09-14 19:58:47

DataSet和Dat

2009-06-24 13:50:29

JSF和MVC

2009-06-24 16:42:17

JSF和Facelet

2009-06-24 17:43:24

Struts和JSF

2009-06-24 16:16:30

JSF和Tapestr

2011-06-30 10:20:38

JSFMVC

2009-06-23 13:21:26

JSF和Spring

2010-05-06 11:02:26

Oracle游标

2009-06-22 15:35:31

JSF和Struts

2009-06-24 14:17:00

BackingBeanJSF配置文件

2009-06-25 14:26:33

JSFDojo小部件

2010-07-01 14:36:34

SQL Server动

2009-06-23 09:05:10

Seam框架JSF

2009-02-04 08:52:55

动态页面XMLXSL

2009-07-03 10:48:12

JSP和JSF

2009-06-23 16:52:16

JSFHibernateWeb应用
点赞
收藏

51CTO技术栈公众号