这篇文章主要介绍“JSF如何动态生成固定表头和行标的DataTable”,在日常操作中,相信很多人在JSF如何动态生成固定表头和行标的DataTable问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JSF如何动态生成固定表头和行标的DataTable”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
自己在写JSF动态生成DataTable的时候也查阅了很多相关文章, 以及实现固定表头等等。
在解决固定表头问题上我是用的两张表(加行标是3张表)实现的, 因为我发现如果用JSF1.1的化实现固定表头几乎不可能(如果有人有好的想法, 比如用JS比较在行的朋友请告诉我解决方法, 谢谢)
实现给每个Header加上一个CommandLink的时候我遇到了很大的问题, 就是无论如何通过JSF动态生成的这些CommandLink都没有办法触发事件(并不报错), 这个问题足足折磨了我3天。。。
***终于发现问题的所在, 是因为我在生成CommandLink的时候没有给每个CommandLink SetID。。。 就加上这句话,问题立马解决。
我原来的代码是链接数据库的, 但是这样的化大家也没有办法参考, 所以我对代码少加修改, 就算是个小例子吧, 可重用。
希望大家对我的代码提出JSF动态生成固定表头和行标的DataTable的意见,一起进步,谢谢。
<%@ 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>
到此,关于“JSF如何动态生成固定表头和行标的DataTable”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。