rowToggle 应该调用第一个 rowSelect 事件 jsf primefaces
rowToggle should call first rowSelect event jsf primefaces
<p:dataTable var="item" id="datatable-list" value="#{generalJournalEntryMB.generalJournalEntries}" rows="10"
paginator="true" reflow="true" paginatorPosition="top" rowExpandMode="single"
rendered="#{generalJournalEntryMB.generalJournalEntries.size() > 0}" rowIndexVar="rowIndex"
paginatorTemplate="{CurrentPageReport} {PreviousPageLink} {NextPageLink} " rowKey="#{item.id}"
selectionMode="single" selection="#{generalJournalEntryMB.generalJournalEntry}" widgetVar="datatable-list">
<p:column style="width:16px">
<p:rowToggler />
</p:column>
<p:column headerText="Id">
<h:outputText value="#{item.id}" />
</p:column>
<p:column headerText="Description">
<h:outputText value="#{item.description}" />
</p:column>
<p:column headerText="Amount">
<h:outputText value="#{item.amount}" />
</p:column>
<p:column headerText="Reference">
<h:outputText value="#{item.reference}" />
</p:column>
<p:column headerText="State">
<h:outputText value="#{item.postingState.value}" />
</p:column>
<p:rowExpansion id="expand" rendered="true">
<p:panelGrid columns="2" columnClasses="label,value" style="width:300px">
<h:outputText value="Id:" />
<h:outputText value="1" />
<h:outputText value="Year" />
<h:outputText value="1983" />
<h:outputText value="Color:" />
<h:outputText value="White" />
<h:outputText value="Price" />
<h:outputText value="#{generalJournalEntryMB.price}" />
</p:panelGrid>
</p:rowExpansion>
<p:ajax event="rowSelect" listener="#{generalJournalEntryMB.rowSelectListener}" update="main:top-menu-bar" />
<p:ajax event="rowToggle" listener="#{generalJournalEntryMB.rowToggleListener}" update="main:top-menu-bar" />
</p:dataTable>
当我在没有 select 的情况下展开该行时,它什么也没显示。目前我正在做的是首先 select 行并展开它以获得期望的结果。
我们如何触发 rowSelect even / ajax 在 rowToggle 事件触发时自动调用?
您可以覆盖 primefaces toggleExpansion
函数,使其在
之前执行 selectRow
PrimeFaces.widget.DataTable.prototype.toggleExpansion = (function() {
var cached_function = PrimeFaces.widget.DataTable.prototype.toggleExpansion;
return function() {
var row = arguments[0].closest('tr');
if(this.cfg.selectionMode === 'single') {
this.unselectAllRows();
}
if(this.cfg.selectionMode){
this.selectRow(row, false);
}
var result = cached_function.apply(this, arguments);
return result;
};
})();
<p:dataTable var="item" id="datatable-list" value="#{generalJournalEntryMB.generalJournalEntries}" rows="10"
paginator="true" reflow="true" paginatorPosition="top" rowExpandMode="single"
rendered="#{generalJournalEntryMB.generalJournalEntries.size() > 0}" rowIndexVar="rowIndex"
paginatorTemplate="{CurrentPageReport} {PreviousPageLink} {NextPageLink} " rowKey="#{item.id}"
selectionMode="single" selection="#{generalJournalEntryMB.generalJournalEntry}" widgetVar="datatable-list">
<p:column style="width:16px">
<p:rowToggler />
</p:column>
<p:column headerText="Id">
<h:outputText value="#{item.id}" />
</p:column>
<p:column headerText="Description">
<h:outputText value="#{item.description}" />
</p:column>
<p:column headerText="Amount">
<h:outputText value="#{item.amount}" />
</p:column>
<p:column headerText="Reference">
<h:outputText value="#{item.reference}" />
</p:column>
<p:column headerText="State">
<h:outputText value="#{item.postingState.value}" />
</p:column>
<p:rowExpansion id="expand" rendered="true">
<p:panelGrid columns="2" columnClasses="label,value" style="width:300px">
<h:outputText value="Id:" />
<h:outputText value="1" />
<h:outputText value="Year" />
<h:outputText value="1983" />
<h:outputText value="Color:" />
<h:outputText value="White" />
<h:outputText value="Price" />
<h:outputText value="#{generalJournalEntryMB.price}" />
</p:panelGrid>
</p:rowExpansion>
<p:ajax event="rowSelect" listener="#{generalJournalEntryMB.rowSelectListener}" update="main:top-menu-bar" />
<p:ajax event="rowToggle" listener="#{generalJournalEntryMB.rowToggleListener}" update="main:top-menu-bar" />
</p:dataTable>
当我在没有 select 的情况下展开该行时,它什么也没显示。目前我正在做的是首先 select 行并展开它以获得期望的结果。
我们如何触发 rowSelect even / ajax 在 rowToggle 事件触发时自动调用?
您可以覆盖 primefaces toggleExpansion
函数,使其在
selectRow
PrimeFaces.widget.DataTable.prototype.toggleExpansion = (function() {
var cached_function = PrimeFaces.widget.DataTable.prototype.toggleExpansion;
return function() {
var row = arguments[0].closest('tr');
if(this.cfg.selectionMode === 'single') {
this.unselectAllRows();
}
if(this.cfg.selectionMode){
this.selectRow(row, false);
}
var result = cached_function.apply(this, arguments);
return result;
};
})();