javascript

位置:IT落伍者 >> javascript >> 浏览文章

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


发布日期:2018年03月15日
 
JSF动态生成固定表头和行标的DataTable

这个例子在jsf下通过JSF 动态生成DataTable 固定表头 固定行标 点击表头可排序 希望可以供大家学习和参考

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

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

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

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

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

希望大家对我的代码提出宝贵意见一起进步谢谢

Dynamicjsp

<%@tagliburi=prefix=f%>

<%@tagliburi=prefix=h%>

<Scriptlanguage=JavaScript>

vartdW;

//Scroll

functionf_scroll(Col_TRow_TDivNm){

if(Col_T!=){

documentgetElementById(Col_T)scrollLeft=documentgetElementById(DivNm)scrollLeft;

}

if(Row_T!=){

documentgetElementById(Row_T)scrollTop=documentgetElementById(DivNm)scrollTop;

}

}

</Script>

<html>

<f:view>

<head>

<title>TABLE</title>

<linkrel=stylesheettype=text/css>

</head>

<body>

<h:form>

<fontsize=color=black

style=position:absolute;left:;top:;width:;height:>

<h:outputTextvalue=PleaseEnter:/></font>

<h:inputTextvalue=size=

style=position:absolute;left:;top:;width:;height:/>

<h:commandButtonvalue=Searchaction=

style=position:absolute;left:;top:;width:;height:/>

<tableBORDER=

STYLE=POSITION:ABSOLUTE;LEFT:px;TOP:px;right:px;bottom:px;>

<tr>

<tdSTYLE=textalign:right;>

<!Tablestart>

<!Tableend>

</td>

<td>

<!Tablestart>

<DivID=Table

STYLE=position:relative;top:;borderleft:ptsolidblack;

borderright:ptsolidblack;height:px;width:px;overflowx:hidden;>

<h:dataTablevalue=#{myBeanmyHeader}var=myHeader

binding=#{myBeanheaderDataTable}bgcolor=whiteborder=

cellspacing=rendered=truestyleClass=orders

headerClass=ordersHeaderrowClasses=evenColumnoddColumn

style=position:absolute;left:;top:;

width:;height:;bordercollapse:collapse;

id=ree>

</h:dataTable>

</Div>

<!Tableend>

</td>

</tr>

<tr>

<tdSTYLE=verticalalign:top;>

<!Tablestart>

<DivID=Table

STYLE=borderbottom:ptsolidblack;bordertop:ptsolidblack;

width:px;height:px;overflowy:hidden;position:relative;left:;>

<h:dataTablevalue=#{myBeanmyNum}var=myNum

binding=#{myBeannumDataTable}bgcolor=whiteborder=

cellspacing=rendered=truestyleClass=orders

headerClass=ordersHeaderrowClasses=evenColumnoddColumn

style=position:absolute;left:;top:;width:;height:;bordercollapse:collapse;

id=dee>

</h:dataTable>

</Div>

<!Tableend>

</td>

<tdSTYLE=verticalalign:top;>

<!Tablestart>

<DivID=TableonScroll=f_scroll(TableTableTable);

STYLE=height:px;width:px;overflowy:scroll;overflowx:scroll;>

<h:dataTablevalue=#{myBeanmyList}var=myItem

binding=#{myBeandynamicDataTable}bgcolor=whiteborder=

cellspacing=rendered=truestyleClass=orders

headerClass=ordersHeaderrowClasses=evenColumnoddColumn

style=position:absolute;left:;top:;width:;height:;bordercollapse:collapse;>

</h:dataTable>

</Div>

<!Tableend>

</td>

</tr>

</table>

</h:form>

</body>

</f:view>

</html>

MyBeanjava

packagemypackage;

importjavautilArrayList;

importjavautilList;

importjavaxfacesapplicationApplication;

importponentUIColumn;

importponentUIOutput;

importlHtmlCommandLink;

importlHtmlDataTable;

importlHtmlOutputText;

importntextFacesContext;

importjavaxfaceselMethodBinding;

importjavaxfaceselValueBinding;

importjavaxfaceseventActionEvent;

publicclassMyBean{

privateList<List<String>>myList;

privateList<List<String>>myHeader;

privateList<List<Integer>>myNum;

privateHtmlDataTabledynamicDataTable;

privateHtmlDataTableheaderDataTable;

privateHtmlDataTablenumDataTable;

privatestaticinttempWidth=;

//LoadDatafromDataBasetoEveryDataTable

publicvoidloadMyList()throwsException{

myList=newArrayList<List<String>>();

introw=;

while(row>){

intcolumn=;

Stringstr=o;

List<String>tmpvector=newArrayList<String>();

while(column>){

tmpvectoradd(str);

column;

}

row;

myListadd(tmpvector);

}

}

publicvoidloadMyHeader()throwsException{

myHeader=newArrayList<List<String>>();

Stringstr=*****;

intcolumn=;

List<String>tmpvector=newArrayList<String>();

while(column>){

tmpvectoradd(str);

column;

}

myHeaderadd(tmpvector);

}

publicvoidloadMyNum()throwsException{

myNum=newArrayList<List<Integer>>();

introw=;

while(row<){

List<Integer>tmpvector=newArrayList<Integer>();

tmpvectoradd(row);

myNumadd(tmpvector);

row++;

}

}

//initializeEveryDataTabletotheFront

publicvoidpopulateDynamicDataTable(){

if(myList!=null&&myListsize()>){

dynamicDataTable=newHtmlDataTable();

intcolumns=((List)myListget())size();

Systemoutprintln(DisplayCloumn:+columns);//

for(inti=;i<columns;i++){

ValueBindingmyItem=

FacesContextgetCurrentInstance()getApplication()createValueBinding(#{myItem[+i+]});

UIColumncolumn=newUIColumn();

HtmlOutputTextoutputText=newHtmlOutputText();

outputTextsetValueBinding(valuemyItem);

outputTextsetStyle(width:+tempWidth+);

columngetChildren()add(outputText);

columnsetId(col_+i);//YoushouldsetIDofeverycomponentwhichyoucreateintheBackingBean

dynamicDataTablegetChildren()add(column);

}

}

}

publicvoidpopulateHeaderDataTable(){

if(myHeader!=null&&myHeadersize()>){

headerDataTable=newHtmlDataTable();

intcolumns=((List)myHeaderget())size();

FacesContextfacesContext=FacesContextgetCurrentInstance();

Applicationapplication=facesContextgetApplication();

for(inti=;i<columns;i++){

HtmlCommandLinkcommandLink=

(HtmlCommandLink)applicationcreateComponent(HtmlCommandLinkCOMPONENT_TYPE);

StringvalueBindingExpression=#{myHeader[+i+]};

ValueBindingvalueBinding=applicationcreateValueBinding(valueBindingExpression);

commandLinksetValueBinding(valuevalueBinding);

commandLinksetId(head_comankLink_+i);//Themostimportant!!!Ifyoudontputitnothingisgonnahappen

commandLinksetStyle(color:blue);

commandLinksetStyle(width:+tempWidth+);

commandLinkgetAttributes();

Class[]params={ActionEventclass};

MethodBindingactionListener=

applicationcreateMethodBinding(#{myBeansetSelectedDocumentId}params);

commandLinksetActionListener(actionListener);

commandLinksetImmediate(true);

UIColumncolumn=newUIColumn();

columngetChildren()add(commandLink);

columnsetId(head_+i);

headerDataTablegetChildren()add(column);

}

}

}

publicvoidpopulateNumDataTable(){

if(myNum!=null&&myNumsize()>){

numDataTable=newHtmlDataTable();

UIOutputoutput=newUIOutput();

ValueBindingmyItem=

FacesContextgetCurrentInstance()getApplication()createValueBinding(#{myNum[]});

outputsetValueBinding(valuemyItem);

//Setcolumn

UIColumncolumn=newUIColumn();

columngetChildren()add(output);

columnsetId(num);

numDataTablegetChildren()add(column);

}

}

//TestActionsandActionListeners

publicvoidsetSelectedDocumentId(ActionEventevent)throwsException

{

}

//Getters

publicHtmlDataTablegetDynamicDataTable()throwsException{

if(dynamicDataTable==null){

loadMyList();//Reloadtogetmostrecentdata

populateDynamicDataTable();

}

returndynamicDataTable;

}

publicHtmlDataTablegetHeaderDataTable()throwsException{

if(headerDataTable==null){

loadMyHeader();//Reloadtogetmostrecentdata

populateHeaderDataTable();

}

returnheaderDataTable;

}

publicHtmlDataTablegetNumDataTable()throwsException{

if(numDataTable==null){

loadMyNum();//Reloadtogetmostrecentdata

populateNumDataTable();

}

returnnumDataTable;

}

publicList<List<Integer>>getMyNum(){

returnmyNum;

}

publicList<List<String>>getMyHeader(){

returnmyHeader;

}

publicList<List<String>>getMyList(){

returnmyList;

}

//Setters

publicvoidsetDynamicDataTable(HtmlDataTabledynamicDataTable){

thisdynamicDataTable=dynamicDataTable;

}

publicvoidsetHeaderDataTable(HtmlDataTableheaderDataTable){

thisheaderDataTable=headerDataTable;

}

publicvoidsetMyHeader(List<List<String>>myHeader){

thismyHeader=myHeader;

}

publicvoidsetNumDataTable(HtmlDataTablenumDataTable){

thisnumDataTable=numDataTable;

}

publicvoidsetMyNum(List<List<Integer>>myNum){

thismyNum=myNum;

}

publicvoidsetMyList(List<List<String>>myList){

thismyList=myList;

}

}

facesconfigxml


<?xmlversion=encoding=UTF?>

<!DOCTYPEfacesconfigPUBLIC//SunMicrosystemsInc//DTDJavaServerFacesConfig//ENfacesconfig__dtd>

<facesconfig>

<managedbean>

<managedbeanname>myBean</managedbeanname>

<managedbeanclass>mypackageMyBean</managedbeanclass>

<managedbeanscope>session</managedbeanscope>

</managedbean>

</facesconfig>

stylescss

orders{

border:thinsolidblack;

}

ordersHeader{

textalign:center;

fontstyle:;

color:Snow;

fontsize:px;

background:Teal;

}

evenColumn{

textalign:center;

fontsize:px;

background:#FFFFF;

}

oddColumn{

textalign:center;

fontsize:px;

background:white;

}

               

上一篇:Javascript内存洩露概念及检测方法

下一篇:Applet调用JavaScript函数