如何使用相同的数据表来显示所有的标签键（在这种情况下调整大小不起作用） [英] How to use the same datatable for all the tabs primefaces (resize not working in this case)
问题描述
我已经创建了两个静态选项卡，看看它是否可以使用包含datatable的相同xhtml页面（transactionsPage）。
这些是选项卡：
< h：form id =formTabs>
< p：tabView id =tabsactiveIndex =＃{mainPage.index}>
< p：ajax event =tabCloselistener =＃{mainPage.remove}update =formTabs/>
< p：ajax event =tabChangelistener =＃{mainPage.changeTab}update =formTabs/>
< p：tab id =transAssemblingtitle =ASSEMBLINGclosable =true>
< f：subview id =tab0>
< ui：include src =transactionsPage.xhtml>
< ui：param name =statusvalue =ASSEMBLING/>
< ui：param name =columnListvalue =＃{tabs.list [0] .columnList}/>
< / ui：include>
< / f：subview>
< / p：tab>
< p：tab id =transPrintingtitle =PRINTINGclosable =true>
< f：subview id =tab1>
< ui：include src =transactionsPage.xhtml>
< ui：param name =statusvalue =PRINTING/>
< ui：param name =columnListvalue =＃{tabs.list [1] .columnList}/>
< / ui：include>
< / f：subview>
< / p：tab>
< / p：tabView>
< / h：form>
我使用subView，为了从包含的transactionPage.xhtml中为datatable提供不同的id，所以我可以为所有选项卡使用相同的xhtml页面，只能更改在transactionPage.xhtml的托管bean中计算的列和数据。
所以对于从第一个选项卡的datatable
：绝对路径将是
formTabs：tabs：tab0：transactionsTable
从第二个选项卡：绝对路径将是
formTabs：tabs：tab1：transactionsTable
这是datatable从transactionPage：
< p：dataTable id =transactionsTablevar =datavalue =＃{transactionsPage。 ttList}widgetVar =projectData
rowKey =＃{data.id}
draggableColumns =true
draggableRows =true
resizableColumns =trueemptyMessage =＃{msg ['form.noTransactionsFound']}rows =20
selectionMode =singleselection =＃{transactionsPage.selectedTransaction}
filteredValue = ＃{transactionsPage.fitleredttList}paginator =truepaginatorPosition =bothpaginatorTemplate ={CurrentPageReport} {RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}
>
< p：ajax event =colResizelistener =＃{transactionsPage.onColumnResize}update =transactionsTable/>
< f：ajax event =rowSelectrender =formTabs/>
<！ - Stiky不适用于列过滤paginator =truepaginatorPosition =bottompaginatorTemplate ={CurrentPageReport} {RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} stickyHeader =true - >
< f：facet name =header>
< p：outputPanel styleClass =mainPageProjectsTableHeader>
< h：outputText value =＃{msg ['form.searchAllFields']}style =float：left; margin-right：10px;/>
< p：inputText id =globalFilteronkeyup =PF（'projectData'）。filter（）style =width：150px; float：leftplaceholder =＃{msg ['form.enterKeyword ']}/>
< p：commandButton id =togglertype =buttonvalue =＃{msg ['form.columns']}
styleClass =columnSelectoricon = ui-icon-calculator/>
< p：columnToggler datasource =transactionsTabletrigger =toggler>
< p：ajax event =togglelistener =＃{transactionsPage.onToggle}/>
< / p：columnToggler>
< / p：outputPanel>
< / f：facet>
< c：forEach var =columnitems =＃{transactionsPage.columnList}>
< p：column id =＃{column.id}filterStyleClass =＃{column.filterStyleClass}headerText =＃{column.title}visible =＃{column.visible}width =＃{column.width}filterBy =＃{data [column.property]}filterMatchMode =containsstyleClass =mainPageCompanyColumn>
< f：attribute name =rtcColvalue =＃{column}/>
< h：outputText value =＃{data [column.property]}/>
< / p：column>
< / c：forEach>
< / p：dataTable>
问题如下：
当我想在上一次打开的选项卡中调整列的大小时，它可以工作，我看到在从托管bean调用resize方法之前，调用了一个来自标题Datatable.class的queueEvent方法（在这个方法中，它决定了哪个事件调用），其中clientId是正确的formTabs：tabs：tab1：transactionsTable然后调用resize方法。
但是当我进入另一个选项卡时，来自queueEvent方法的clientId保持不变，从最后一个选项卡openend formTabs：tabs：tab1：transactionsTable，我得到以下异常，以便resize方法不再被调用。
org.primefaces.component.datatable.DataTable.findColumnInGroup（DataTable.java:909）中的
$ org $。 component.datatable.DataTable.findColumn（DataTable.java:900）
在org.primefaces.component.datatable.DataTable.q ueueEvent（DataTable.java:814）
在org.primefaces.behavior.ajax.AjaxBehaviorRenderer.decode（AjaxBehaviorRenderer.java:47）
在javax.faces.component.behavior.ClientBehaviorBase.decode（ClientBehaviorBase。 java：132）
在org.primefaces.renderkit.CoreRenderer.decodeBehaviors（CoreRenderer.java:530）
在org.primefaces.component.datatable.DataTableRenderer.decode（DataTableRenderer.java:66）
我假设发生这种情况，因为datatable的clientId，没有从tab中更新为datatable ，我已经改变了重点。
所以问题是：如何将整个路径/ id更改为新打开的选项卡/ datatable：
formTabs：tabs：tab0：transactionsTable
因为我的假设是这就是为什么不调用resize方法标签，然后是最后打开的标签。
如果不够清楚或架构不好，那么问题将是
如何为11个选项卡使用相同的xhtml页面/ datatable而不创建11个静态数据表？
所以，似乎问题是datatable中的widgetVar，因为它为每个单个datatable使用了相同的widgetVar值，这就是为什么它具有相同的clientId，因为相同的clientId被添加到DOM中。
如果你想阅读关于widgetVar的信息：
http ：//blog.hatemalimam.com/intro-to-primefaces-widgetvar/
所以，作为一个结论，我动态地设置了一个值widgetVar为每个选项卡和clientId在标题Datatable类是正确的，resize方法被调用，它的工作。
I am using primefaces 5.3 and jsf 2.2.6.
I have created two static tabs to see if it works to use the same xhtml page (transactionsPage) that contains a datatable.
These are the tabs:
<h:form id="formTabs">
<p:tabView id="tabs" activeIndex="#{mainPage.index}">
<p:ajax event="tabClose" listener="#{mainPage.remove}" update="formTabs" />
<p:ajax event="tabChange" listener="#{mainPage.changeTab}" update="formTabs" />
<p:tab id="transAssembling" title="ASSEMBLING" closable="true">
<f:subview id="tab0">
<ui:include src="transactionsPage.xhtml">
<ui:param name="status" value="ASSEMBLING" />
<ui:param name="columnList" value="#{tabs.list[0].columnList}" />
</ui:include>
</f:subview>
</p:tab>
<p:tab id="transPrinting" title="PRINTING" closable="true">
<f:subview id="tab1">
<ui:include src="transactionsPage.xhtml">
<ui:param name="status" value="PRINTING" />
<ui:param name="columnList" value="#{tabs.list[1].columnList}" />
</ui:include>
</f:subview>
</p:tab>
</p:tabView>
</h:form>
I used the subView, in order to have different ids for the datatable from the included transactionsPage.xhtml, so that I can use the same xhtml page for all tabs and only change the columns and data, that are calculated in the managed bean of the transactionsPage.xhtml.
So for the datatable from the first tab: the absolute path would be
formTabs:tabs:tab0:transactionsTable
from the second tab: the absolute path would be
formTabs:tabs:tab1:transactionsTable
This is the datatable from the transactionsPage:
<p:dataTable id="transactionsTable" var="data" value="#{transactionsPage.ttList}" widgetVar="projectData"
rowKey="#{data.id}"
draggableColumns="true"
draggableRows="true"
resizableColumns="true" emptyMessage="#{msg['form.noTransactionsFound']}" rows="20"
selectionMode="single" selection="#{transactionsPage.selectedTransaction}"
filteredValue="#{transactionsPage.fitleredttList}" paginator="true" paginatorPosition="both" paginatorTemplate="{CurrentPageReport} {RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
>
<p:ajax event="colResize" listener="#{transactionsPage.onColumnResize}" update="transactionsTable"/>
<f:ajax event="rowSelect" render="formTabs"/>
<!-- Stiky does not work with column filtering paginator="true" paginatorPosition="bottom" paginatorTemplate="{CurrentPageReport} {RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} " stickyHeader="true" -->
<f:facet name="header">
<p:outputPanel styleClass="mainPageProjectsTableHeader" >
<h:outputText value="#{msg['form.searchAllFields']}" style="float:left; margin-right:10px;"/>
<p:inputText id="globalFilter" onkeyup="PF('projectData').filter()" style="width:150px; float:left" placeholder=" #{msg['form.enterKeyword']}"/>
<p:commandButton id="toggler" type="button" value="#{msg['form.columns']}"
styleClass="columnSelector" icon="ui-icon-calculator" />
<p:columnToggler datasource="transactionsTable" trigger="toggler" >
<p:ajax event="toggle" listener="#{transactionsPage.onToggle}" />
</p:columnToggler>
</p:outputPanel>
</f:facet>
<c:forEach var="column" items="#{transactionsPage.columnList}">
<p:column id="#{column.id}" filterStyleClass="#{column.filterStyleClass}" headerText="#{column.title}" visible="#{column.visible}" width="#{column.width}" filterBy="#{data[column.property]}" filterMatchMode="contains" styleClass="mainPageCompanyColumn">
<f:attribute name="rtcCol" value="#{column}"/>
<h:outputText value="#{data[column.property]}" />
</p:column>
</c:forEach>
</p:dataTable>
The problem is the following:
When I want to resize a column in the last opened tab, it works and I see that before calling the resize method from the managed bean, a queueEvent method from the primefaces Datatable.class is called(in this method it takes the decision which event to call), in which the clientId is correct formTabs:tabs:tab1:transactionsTable and then the resize method is being called.
But when I go in another tab, the clientId from the queueEvent method remains the same, from the last tab openend formTabs:tabs:tab1:transactionsTable and I get the following exception, so that the resize method is not be called anymore.
java.lang.NullPointerException
at org.primefaces.component.datatable.DataTable.findColumnInGroup(DataTable.java:909)
at org.primefaces.component.datatable.DataTable.findColumn(DataTable.java:900)
at org.primefaces.component.datatable.DataTable.queueEvent(DataTable.java:814)
at org.primefaces.behavior.ajax.AjaxBehaviorRenderer.decode(AjaxBehaviorRenderer.java:47)
at javax.faces.component.behavior.ClientBehaviorBase.decode(ClientBehaviorBase.java:132)
at org.primefaces.renderkit.CoreRenderer.decodeBehaviors(CoreRenderer.java:530)
at org.primefaces.component.datatable.DataTableRenderer.decode(DataTableRenderer.java:66)
I assume this happens, because of the clientId of the datatable, which is not updated to the datatable from the tab, where I have changed the focus on.
So the question would be: How could I change the whole path/id to the newly opened tab/datatable:
formTabs:tabs:tab0:transactionsTable
because my assumption is that that's why the resize method is not being called for another tab then the last opened tab.
If it's not clear enough or the architecture is bad, then the question would be How to use the same xhtml page/datatable for 11 tabs without creating 11 static datatables?
So, it seemed that the problem was the widgetVar from the datatable, because it was used the same value for the widgetVar for every single datatable and that's why it had the same clientId, because the same clientId was added to the DOM.
If you want to read about the widgetVar: http://blog.hatemalimam.com/intro-to-primefaces-widgetvar/
So, as a conclusion, I have set dynamically a value to the widgetVar for each tab and the clientId in the primefaces Datatable class was correct,the resize method was called and it worked.
这篇关于如何使用相同的数据表来显示所有的标签键（在这种情况下调整大小不起作用）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
