primefaces数据表选择问题 [英] primefaces datatable selection issue

问题描述

我在选择数据表时遇到了一些奇怪的问题(很可能是我做错了什么). 想法很简单-带有选择的数据表和一个用于编辑记录的对话框.问题是，如果我使用<h:inputText>标记(或<p:inputText>)，则它似乎是空白的，尽管后备bean(indicatorBean.indicator.code)中的对象包含数据.有趣的是，如果我输入<h:outputText>而不是输入，则会显示数据.

I have some weird issue with datatable selection (most likely i'm doing something wrong). Idea is simple - datatable with selection and a dialog to edit the records. The problem is that if i use <h:inputText> tag (or <p:inputText>) it appears to be blank, though the object in the backing bean (indicatorBean.indicator.code) contains data. Interestingly if i put <h:outputText> instead of input the data is shown.

这是我身体的内容

<!-- language: xml -->
<h:body>
    <h:form id="form">
        <p:growl id="messages" showDetail="true"/>
        <p:dataTable id="indicatorsTable" var="ind" 
                     value="#{indicatorBean.indicators}"
                     selectionMode="single" 
                     selection="#{indicatorBean.indicator}" 
                     rowKey="#{ind.id}">
            <p:column headerText="Name" style="width:125px">
                #{ind.name}
            </p:column>
            <p:column headerText="Code" style="width:125px">
                #{ind.code}
            </p:column>
            <f:facet name="footer">
                <p:commandButton id="viewButton" value="View" 
                                 icon="ui-icon-search" update=":form:display" 
                                 oncomplete="indDialog.show()"/>
            </f:facet>
        </p:dataTable>


        <p:dialog id="dialog" header="Indicator Detail" 
                  widgetVar="indDialog" resizable="false"
                  width="400" showEffect="fade" hideEffect="fade">

            <h:panelGrid id="display" columns="2" cellpadding="4">
                     <h:outputText value="Code:"/>
                     <!-- PROBLEM IS HERE --> 
                     <h:inputText value="#{indicatorBean.indicator.code}"/>

                     <h:outputText value="Name:"/>
                     <h:outputText value="#{indicatorBean.indicator.name}"/>
            </h:panelGrid>

            <p:commandButton value="Save" onclick="indDialog.hide()"/>
            <p:commandButton value="Cancel" onclick="indDialog.hide()"/>
        </p:dialog>
    </h:form>

</h:body>

支持bean就是访问者.

Backing bean is nothing other that accessors.

我发现的另一件事是，如果我将<h:inputtext>中的el表达式替换为静态文本(如<h:inputText value="static text"/>)，则会显示出来. 这是一些图片:

Another thing i spotted is if i replace el expression in <h:inputtext> with a static text (like <h:inputText value="static text"/>), it is shown. Here are some pictures:

primefaces 3.4

primefaces 3.4

推荐答案

您似乎已经发现的问题是，您将对话框本身放置在表单中.这是一个问题，因为jQuery对话框控件的工作方式是Primefaces对话框的客户端基础.本质上，它将把与对话框关联的DOM元素移到其他位置，可能在您打算将其封闭的表单之外.

The problem as you seem to have already figured out is that you are placing the dialog itself inside of a form. This is an issue because of the way the jQuery dialog control works, which is the client side foundation of the Primefaces dialog. Essentially it will move DOM elements associated with the dialog elsewhere, possibly outside of the form that you intend to enclose it.

通过将对话框放在窗体外部，然后将窗体放在对话框主体内部，可以轻松解决此问题.

This problem can be easily solved by putting the dialog outside of the form, and putting a form inside of the dialog body instead.

<p:dialog id="dialogId" ...>
  <h:form id="dlgForm">
     ....
  </h:form>
</p:dialog>

通过这种方式，当jQuery UI将对话框控件移动到DOM中的其他位置时，该DOM的内容(包括表单)将随之提供.

In this way when jQuery UI moves the dialog control elsewhere in the DOM, the contents of that DOM, including the form come with it.

这篇关于primefaces数据表选择问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！