Jsf 确认在ajax请求发送到控制器之前显示的对话框
展示案例中的示例:Jsf 确认在ajax请求发送到控制器之前显示的对话框,jsf,primefaces,confirm-dialog,Jsf,Primefaces,Confirm Dialog,展示案例中的示例: <h:form> <p:dataTable id="tableStateDT" var="car" value="#{dtTableStateView.cars}" widgetVar="carsTable" multiViewState="true" rows="10" paginator="true" paginatorTemplate="{Curren
<h:form>
<p:dataTable id="tableStateDT" var="car" value="#{dtTableStateView.cars}" widgetVar="carsTable" multiViewState="true"
rows="10" paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15"
selectionMode="single" selection="#{dtTableStateView.selectedCar}" rowKey="#{car.id}"
emptyMessage="No cars found with given criteria" filteredValue="#{dtTableStateView.filteredCars}">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter" onkeyup="PF('carsTable').filter()" style="width:150px" placeholder="Enter keyword"/>
</p:outputPanel>
</f:facet>
<p:ajax event="rowSelect" update=":form:carDetail" oncomplete="PF('carDialog').show()" />
<p:column headerText="Id" filterBy="#{car.id}" sortBy="#{car.id}" filterMatchMode="contains">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year" filterBy="#{car.year}" sortBy="#{car.year}" filterMatchMode="startsWith">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand" filterBy="#{car.brand}" sortBy="#{car.brand}" filterMatchMode="exact">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('carsTable').filter()" style="width:100px;" >
<f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{dtTableStateView.brands}" />
</p:selectOneMenu>
</f:facet>
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color" filterBy="#{car.color}" sortBy="#{car.color}" filterMatchMode="in">
<f:facet name="filter">
<p:selectCheckboxMenu label="Colors" onchange="PF('carsTable').filter()" style="width:80px;" panelStyle="width:125px" scrollHeight="150">
<f:selectItems value="#{dtTableStateView.colors}" />
</p:selectCheckboxMenu>
</f:facet>
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
<p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="carDetail" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty dtTableStateView.selectedCar}" columnClasses="label,value">
<f:facet name="header">
<p:graphicImage name="demo/images/car/#{dtTableStateView.selectedCar.brand}-big.gif"/>
</f:facet>
<h:outputText value="Id:" />
<h:outputText value="#{dtTableStateView.selectedCar.id}" />
<h:outputText value="Year" />
<h:outputText value="#{dtTableStateView.selectedCar.year}" />
<h:outputText value="Brand" />
<h:outputText value="#{dtTableStateView.selectedCar.brand}" />
<h:outputText value="Color:" />
<h:outputText value="#{dtTableStateView.selectedCar.color}" style="color:#{dtTableStateView.selectedCar.color}"/>
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
:当用户单击任意行/单元格PF('carDialog')时。调用show()
但我想从用户处确认(是或否)是否显示车辆详细信息。在发送ajax请求之前
使用PrimeFaces中的
p:confirmDialog
并将行选择更改为按钮解决方案
<p:dataTable id="basicDT" var="car" value="#{selectionView.cars1}">
<f:facet name="header">Basic</f:facet>
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
<p:column style="width:32px;text-align: center">
<p:commandButton oncomplete="PF('carDialog').show()"
icon="ui-icon-search" title="View">
<f:setPropertyActionListener value="#{car}"
target="#{selectionView.selectedCar}" />
<p:confirm header="Confirmation" message="Are you sure?"
icon="ui-icon-alert" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Yes" type="button"
styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="No" type="button"
styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
<p:dialog header="Car Info" widgetVar="carDialog" modal="true"
showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="carDetail" style="text-align:center;">
<p:panelGrid columns="2"
rendered="#{not empty selectionView.selectedCar}"
columnClasses="label,value">
<h:outputText value="Id:" />
<h:outputText value="#{selectionView.selectedCar.id}" />
<h:outputText value="Year" />
<h:outputText value="#{selectionView.selectedCar.year}" />
<h:outputText value="Color:" />
<h:outputText value="#{selectionView.selectedCar.color}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
基本的
但是如果我使用命令,如何使用单击和双击事件或datatable上的任何事件,但没有现成的事件组件。我添加了一个按钮解决方案的完整示例。