0

如何在 p:dataTable 中执行多行选择，该对话框位于具有 modal="true" 的对话框中，并且该对话框位于 ui:composition 元素中，并且该 ui 组合元素放置在布局中。

1 问题：（假设现在 p:dialog 没有放在布局中）你不能在 p:dataTable 中执行多项选择，它由 p:dialog 元素包装，除非你删除 appendToBody="true" 并添加 transient="true" . 所以现在我们有了模态对话框，它有 p:dataTable 和工作多选，所有东西都放在 ui:composition 中。表格看起来如何：

<ui:composition xmlns="http://www.w3c.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions"
xmlns:c="http://java.sun.com/jsp/jstl/core"
template="/layout/layout.xhtml">
<ui:define>
<h:form>
    <p:commandButton id="multiViewButton" value="View" 
    update=":form:multiCars" onclick="dlg2.show();" type="button"/> 
</h:form>

<h:form id="form">   
  <p:dialog id="modalDialog" header="Pasirinkimas" widgetVar="dlg2" 
modal="true" height="300" transient="true" resizable="false" selectionMode="multiple">  
  <p:dataTable id="multiCars" var="car" value="#{tableBean.mediumCarsModel}" paginator="true" rows="10" selection="#{tableBean.selectedCars}">

    <p:column headerText="Model" style="width:25%">  
        #{car.model}  
    </p:column>  

    <p:column headerText="Year" style="width:25%">  
        #{car.year}  
    </p:column>  

    <p:column headerText="Manufacturer" style="width:24%">  
        #{car.manufacturer}  
    </p:column>  

    <p:column headerText="Color" style="width:24%">  
        #{car.color}  
    </p:column>  

</p:dataTable>  

<p:commandButton id="multiViewButton" value="View" icon="ui-icon-search"  
    update=":form:displayMulti" oncomplete="multiCarDialog.show()" process="multiCars"/> 
  </p:dialog>
    <p:dialog id="multiDialog" header="Car Detail" widgetVar="multiCarDialog"  
        height="300" showEffect="fade" hideEffect="explode">  

            <p:dataList id="displayMulti" value="#{tableBean.selectedCars}" var="selectedCar">  
            Model: #{selectedCar.model}, Year: #{selectedCar.year}  
        </p:dataList>  
    </p:dialog>  
</h:form> 
</ui:define> 
</ui:composition>

2 问题。有趣的部分开始了，然后这个 ui:composition 被放置在布局中。然后 p:dialog 的盾牌出现在对话框本身的前面。解决方案是添加 appendToBody="true"，但随后多选停止工作，并且不行。另一种解决方案是将对话框放置在布局元素之外，但我们在 ui:composition 元素中，所以这不起作用。我的最终解决方案是通过设置 modal="false" 来禁用 p:dialog modal 属性，但我对此并不满意。

有什么办法可以在打开 p:dialog 模式属性的对话框、ui:composition 和 layout 中的数据表中实现多行选择？

4

1 回答 1

0

事实证明 p:dialog 必须移到表单之外，并且必须将表单放在对话框中，并且必须添加 appendToBody="true" 属性而不是 transient="true" 所以代码看起来应该类似于这个：

<p:dialog id="modalDialog" header="Pasirinkimas" widgetVar="dlg2" modal="true" height="300" appendToBody="true" resizable="false" selectionMode="multiple">  
  <h:form id="form">
  <p:dataTable id="multiCars" var="car" value="#{tableBean.mediumCarsModel}" paginator="true" rows="10" selection="#{tableBean.selectedCars}">

  <p:column headerText="Model" style="width:25%">  
    #{car.model}  
  </p:column>  

  <p:column headerText="Year" style="width:25%">  
    #{car.year}  
  </p:column>  

  <p:column headerText="Manufacturer" style="width:24%">  
    #{car.manufacturer}  
  </p:column>  

  <p:column headerText="Color" style="width:24%">  
    #{car.color}  
  </p:column>  

  </p:dataTable>  

  <p:commandButton id="multiViewButton" value="View" icon="ui-icon-search"  
update=":form:displayMulti" oncomplete="multiCarDialog.show()" process="multiCars"/> 
 </h:form>
</p:dialog>

这是因为 appendToBody="true" 将元素从当前上下文中取出，并将其附加到文档正文的底部，因此没有包装 p:dialog 的表单，所以我们需要在 p:dialog 内插入表单。

于 2013-10-10T17:19:35.727 回答