Primefaces 自动完成菜单在错误的位置打开

Question

我有一些详细信息的对话框。打开对话框时，信息显示为不可编辑的标签。用户可以打开可编辑网格按下按钮，将渲染参数更改为 panelGrid，noneditabile 设置为 flase，editabile 设置为 true。

在可编辑网格中，我有自动完成组件，该组件的菜单显示在错误的位置。自动完成菜单的左侧和顶部属性是相对于正文设置的，而不是相对于对话框设置的（例如对话框的左上角位于 0,0 上）。仅当我第一次打开对话框时才会发生这种情况，如果我关闭它并再次打开，则菜单会在文本框字段下方正确打开。

<p:dialog ... appendTo="@(body)">
  <h:form>  
    <p:outputPanel id="opX">
      <p:panelGrid rendered="#{x}" > 
        // non editabile content
      </p:panelGrid>

      <p:panelGrid rendered="#{!x}" >
        // editabile content
        ... 
        <p:autoComplete value="#{xBean.acValue}"  completeMethod="#{xBean.acMenu}" />              
        ...
      </p:panelGrid>
    </p:outputPanel>
    <p:commandButton action="#{x=!x;}" process="@this" update="opX" />
  </h:form>
</p:dialog>

知道为什么会这样吗？ 此外，我在自动完成方面遇到了麻烦，它在之后呈现时（或在某些更改后更新）中有列。 我得到错误：

itemLabel="#{sifra.value}"：在类型上找不到属性“值” java.lang.String

<p:autoComplete value="#{xBean.acValue}" completeMethod="#{xBean.acMenu}" var="sifra" itemValue="#{sifra.value}" itemLabel="#{sifra.value}" >
  <p:column><b>#{sifra.value}</b></p:column>
  <p:column>#{sifra.name}</p:column>
</p:autoComplete>

---

 public List<GeneralListDto> acMenu(String inputValue) {
   try {
     GeneralListDto x = calling sme web service;
     return x;
   } 
   catch(Exception e){
     ...
   }
  }

public class GeneralListDto {

public GeneralListDto(){

}

public GeneralListDto(String n, String v, String d){
    this.name = n;
    this.value = v;
    this.description = d;
}

private String value;
private String name;
private String description;

getter and setters
    ....

}

Answer 1

很遗憾，我无法重现您的问题，但这里有一些提示：

• 尝试将表单放在对话框之外

     <h:form id="dialogForm">  
        <p:dialog widgetVar="dlgWV" appendToBody="true">
        </p:dialog>
     </h:form>

• 尝试在打开对话框之前更新表单，这样可能会“重新计算位置”

    <p:commandButton update=":dialogForm" oncomplete="dlgWV.open()" />

• 至于itemLabel="#{sifra.value}": Property 'value' not found on type java.lang.String。 您需要为sifra 对象实现转换器。

• 有时如果您在自动完成建议面板中的结果过多，您可能会遇到视图问题，例如位置和一些不可见的项目，在这种情况下您有两种解决方案，CSS 或overrride the position of the panel。

---

CSS

   .ui-autocomplete-panel {
       max-width: 400px;
       z-index: 2012;
       overflow:auto;
       height: 200px;
    }

---

JS

PrimeFaces.widget.AutoComplete.prototype.alignPanel = function() {
    var fixedPosition = this.panel.css('position') == 'fixed',
    win = $(window),
    positionOffset = fixedPosition ? '-' + win.scrollLeft() + ' -' + win.scrollTop() : null,
    panelWidth = null;

    if(this.cfg.multiple) {
        panelWidth = this.multiItemContainer.innerWidth() - (this.input.position().left - this.multiItemContainer.position().left);
    }
    else {
        panelWidth = this.input.innerWidth();
    }

    this.panel.css({
                    left:'',
                    top:'',
                    width: panelWidth
            })
            .position({
                my: 'left top'
                ,at: 'left bottom'
                ,of: this.input
                ,collision: 'none',
                offset : positionOffset
            });
}

希望这会有所帮助。