135-1821-9792

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.  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.  
  16.   
  17.    
  18.    </strong>TABLE<strong> title></strong>  </li> <li>  <strong><link</strong> rel="stylesheet" type="text/css" href="styles.css"<strong>></strong>  </li> <li> <strong> head></strong>  </li> <li><strong><body></strong>  </li> <li> <strong><h:form></strong>  </li> <li>  <<strong>font</strong> size="2" color="black"  </li> <li>    style="position:absolute; left: 35; top: 5; width:200; height:20"<strong>></strong>  </li> <li>      <strong><h:outputText</strong> value="Please Enter:" <strong>/></strong> <strong> font></strong>  </li> <li>   <strong><h:inputText</strong> value="" size="20"  </li> <li>      style="position:absolute; left: 110; top: 5; width:150; height:20" <strong>/></strong>  </li> <li>   <strong><h:commandButton</strong> value="Search" action=""  </li> <li>      style="position:absolute; left: 270; top: 5; width:50; height:20" <strong>/></strong></li> <li><strong><table</strong> BORDER=0  </li> <li>      STYLE="POSITION: ABSOLUTE; LEFT: 0px; TOP: 30px; right: 0px; bottom: 0px;"<strong>></strong>  </li> <li>  <strong><tr></strong>  </li> <li>      <strong><td</strong> STYLE="text-align: right;"<strong>></strong>  </li> <li>             </li> <li>              </li> <li>       <strong> td></strong>  </li> <li>     <strong><td></strong>  </li> <li>            </li> <li>         <strong><Div</strong> ID="Table2"  </li> <li>         STYLE="position: relative; top: 0; border-left: 0.5pt solid black;   </li> <li>            border-right: 0.5pt solid black; height: 17.75px; width: 285px; overflow-x: hidden;"<strong>></strong>  </li> <li>          <strong><h:dataTable</strong> value="#{myBean.myHeader}" var="myHeader"  </li> <li>              binding="#{myBean.headerDataTable}" bgcolor="white" border="1"  </li> <li>              cellspacing="1" rendered="true" styleClass="orders"  </li> <li>              headerClass="ordersHeader" rowClasses="evenColumn,oddColumn"  </li> <li>              style="position:absolute; left: 0; top: 0;    </li> <li>                    width: 100; height: 10; border-collapse:collapse;"   </li> <li>           id="ree"<strong>></strong>  </li> <li>         <strong> h:dataTable></strong>  </li> <li>       <strong> Div></strong>  </li> <li>          </li> <li>    <strong> td></strong>  </li> <li><strong> tr></strong>  </li> <li><strong><tr></strong>  </li> <li>  <strong><td</strong> STYLE="vertical-align: top;"<strong>></strong>  </li> <li>        </li> <li>   <strong><Div</strong> ID="Table3"  </li> <li>      STYLE="border-bottom: 0.5pt solid black; border-top: 0.5pt solid black;    </li> <li>       width: 25.5px; height: 265px; overflow-y: hidden; position: relative; left: 0;"<strong>></strong>  </li> <li>    <strong><h:dataTable</strong> value="#{myBean.myNum}" var="myNum"  </li> <li>       binding="#{myBean.numDataTable}" bgcolor="white" border="1"  </li> <li>       cellspacing="1" rendered="true" styleClass="orders"  </li> <li>       headerClass="ordersHeader" rowClasses="evenColumn,oddColumn"  </li> <li>       style="position:absolute; left: 0; top: 0; width: 32; height: 5; border-collapse:collapse;"  </li> <li>       id="dee"<strong>></strong>  </li> <li>         <strong> h:dataTable></strong>  </li> <li>           <strong> Div></strong>  </li> <li>                </li> <li>          <strong> td></strong>  </li> <li>          <strong><td</strong> STYLE="vertical-align: top;"<strong>></strong>  </li> <li>               </li> <li>          <strong><Div</strong> ID="Table4" onScroll="f_scroll('Table2','Table3','Table4');"  </li> <li>             STYLE="height: 281px; width: 300px; overflow-y: scroll; overflow-x: scroll;"<strong>></strong>  </li> <li>          <strong><h:dataTable</strong> value="#{myBean.myList}" var="myItem"  </li> <li>              binding="#{myBean.dynamicDataTable}" bgcolor="white" border="1"  </li> <li>               cellspacing="1" rendered="true" styleClass="orders"  </li> <li>               headerClass="ordersHeader" rowClasses="evenColumn,oddColumn"  </li> <li>              style="position:absolute; left: 0; top: 0; width: 100;                                                                            height: 5; border-collapse:collapse;"<strong>></strong>  </li> <li>             <strong> h:dataTable></strong>  </li> <li>           <strong> Div></strong>  </li> <li>                </li> <li>        <strong> td></strong>  </li> <li>       <strong> tr></strong>  </li> <li>      <strong> table></strong>  </li> <li>     <strong> h:form></strong>  </li> <li>    <strong> body></strong>  </li> <li>  <strong> f:view></strong>  </li> <li><strong> html></strong></li> </ol> <br> 本文名称:JSF动态生成固定表头和行标的DataTable <br> 转载注明:<a href="http://www.wtcwzsj.com/article/dhpiosc.html">http://www.wtcwzsj.com/article/dhpiosc.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dpchdch.html">如何用Python清理文本数据?</a> </li><li> <a href="/article/dpchosi.html">云控制分布式主机是什么</a> </li><li> <a href="/article/dpchdjd.html">spring怎么实现自动配置</a> </li><li> <a href="/article/dpchdgi.html">win10怎么看显卡</a> </li><li> <a href="/article/dpchdep.html">什么是挂代理?(网络挂代理服务器)</a> </li> </ul> </div> </div> <!-- end #bd --> <div class="c"></div> <!-- begin #fd --> <div id="fd" class="index-fd pr"> <div class="map-bg3"></div> <div class="wp"> <div class="fd-top"> <dl> <dt>关于我们</dt> <dd> <ul class="ul-fd"> <li><a href="http://www.wtcwzsj.com/about#whous">我们是谁</a></li> <li><a href="http://www.wtcwzsj.com/about#ourcus">我们服务的客户</a></li> <li><a href="http://www.wtcwzsj.com/about#ourteam">我们的团队</a></li> </ul> </dd> </dl> <dl> <dt>我们的服务</dt> <dd> <ul class="ul-fd"> <li><a href="http://www.wtcwzsj.com/service#webbuit">网站建设</a></li> <li><a href="http://www.wtcwzsj.com/service#weiweb">H5响应式 交互网站</a></li> <li><a href="http://www.wtcwzsj.com/service#webmobel">移动端 & 微网站定制</a></li> <li><a href="http://www.wtcwzsj.com/service#servweb">服务流程</a></li> <li><a href="http://www.wtcwzsj.com/service#solution">行业解决方案</a></li> </ul> </dd> </dl> <dl> <dt>网站建设案例</dt> <dd> <ul class="ul-fd"> <li><a href="http://www.wtcwzsj.com/case/">公司集团</a></li> <li><a href="http://www.wtcwzsj.com/case/">数码电子科技</a></li> <li><a href="http://www.wtcwzsj.com/case/">建筑与设计</a></li> <li><a href="http://www.wtcwzsj.com/case/">安防门禁</a></li> <li><a href="http://www.wtcwzsj.com/case/">管理咨询美容</a></li> <li><a href="http://www.wtcwzsj.com/case/">外贸行业</a></li> </ul> </dd> </dl> <dl> <dt>新闻动态</dt> <dd> <ul class="ul-fd"> <li><a href="/news/2.html">温岭网站建设</a></li><li><a href="/news/3.html">温岭网站制作</a></li><li><a href="/news/4.html">温岭网站设计</a></li> </ul> </dd> </dl> <dl> <dt>联系我们</dt> <dd class="pr"> <p><a href="http://www.wtcwzsj.com/news/" class="weixin"></a><a href="http://www.wtcwzsj.com/news/" class="sina"></a><span class="weixin-pic"><img src="/Public/Home/pic/ewm.jpg"></span></p> <p><b class="tel">135-1821-9792</b></p> <h5>公司服务热线</h5> </dd> </dl> </div> <div class="link"> 友情链接: <a href="http://www.wzjingkun.com/" title="发光广告字制作" target="_blank">发光广告字制作</a>   <a href="http://www.nylanyu.com/" title="篷房租赁" target="_blank">篷房租赁</a>   <a href="http://www.cdcxycgs.com/" title="柴油发电机租赁" target="_blank">柴油发电机租赁</a>   <a href="http://www.bzfdjgs.com/" title="巴中发电机公司" target="_blank">巴中发电机公司</a>   <a href="https://www.cdcxhl.com/douyin/" title="短视频拍摄" target="_blank">短视频拍摄</a>   <a href="http://www.worldhkoil.com/" title="校园文化墙设计制作" target="_blank">校园文化墙设计制作</a>   <a href="http://www.scmuxiantiao.com/" title="四川木线条装饰" target="_blank">四川木线条装饰</a>   <a href="http://www.jinhuajc.com/" title="成都保温材料" target="_blank">成都保温材料</a>   <a href="https://www.cdcxhl.com/xiyun.html" title="成都移动主机托管" target="_blank">成都移动主机托管</a>   <a href="https://www.cdcxhl.com/qiye.html" title="企业网站建设" target="_blank">企业网站建设</a>    </div> </div> <div class="fd-copy"> <div class="wp"> <p><span style="color:#CCCCCC;">Copyright © 2009-2022 www.wtcwzsj.com 青羊区广皓图文设计工作室(个体工商户) 版权所有</span> <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow" style="color:#CCCCCC;">蜀ICP备19037934号</a></p> </div> </div> </div> <div class="side"> <ul> <li><a href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" target="_blank"> <div class="sidebox"><img src="/Public/Home/pic/side_icon02.png">在线咨询</div> </a></li> <li><a href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" target="_blank"> <div class="sidebox"><img src="/Public/Home/pic/side_icon01.png">在线咨询</div> </a></li> <li><a href="tel:135-1821-9792"> <div class="sidebox"><img src="/Public/Home/pic/side_icon03.png"><span style="font-size:14px">135-1821-9792</span></div> </a></li> </ul> </div> <div class="side2"> <ul> <li><a href="http://www.wtcwzsj.com/news/"><img src="/Public/Home/pic/r_icon1.png" alt="温岭网站建设"></a> <div class="weixin"><em></em><img src="/Public/Home/pic/ewm.jpg" alt="温岭网站建设"></div> </li> <li><a href="javascript:goTop();" class="sidetop"><img src="/Public/Home/pic/r_icon2.png"></a></li> </ul> </div> <div class="fot"> <ul> <li> <a href="https://p.qiao.baidu.com/cps/mobileChat?siteId=11284691&userId=6256368&type=1&reqParam=%20{%22from%22:0,%22sessionid%22:%22%22,%22siteId%22:%2211284691%22,%22tid%22:%22-1%22,%22userId%22:%226256368%22,%22ttype%22:1,%22siteConfig%22:%20{%22eid%22:%226256368%22,%22queuing%22:%22%22,%22siteToken%22:%226ce441ff9e2d6bedbdfc2a4138de449e%22,%22userId%22:%226256368%22,%22isGray%22:%22false%22,%22wsUrl%22:%22wss://p.qiao.baidu.com/cps3/websocket%22,%22likeVersion%22:%22generic%22,%22siteId%22:%2211284691%22,%22online%22:%22true%22,%22webRoot%22:%22//p.qiao.baidu.com/cps3/%22,%22bid%22:%22160142915792139572%22,%22isSmallFlow%22:0,%22isPreonline%22:0,%22invited%22:0%20},%22config%22:%20{%22themeColor%22:%224d74fa%22%20}%20}&appId=&referer=&iswechat=0&expectWaiter=-1&openid=null&otherParam=null&telephone=null&speedLogId=null&eid=null&siteToken=6ce441ff9e2d6bedbdfc2a4138de449e" target="_blank"> <img src="/Public/Home/pic/fot1.png" alt=""> <p>在线咨询</p> </a> </li> <li> <a href="tel:18980820575" target="_blank"> <img src="/Public/Home/pic/fot2.png" alt=""> <p>拨打电话</p> </a> </li> </ul> </div> <script type="text/javascript" src="/Public/Home/pic/jquery.js"></script> <script type="text/javascript" src="/Public/Home/pic/lib.js"></script> </body></html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>