Home思洋影视事业部网站建设知识库
0 Comments

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

发布于：2014-03-27  |   作者：广州网站建设  |   已聚集：人围观

这个例子在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>
标签：
飞机