【问题标题】:Richfaces: changing a component's 'rendered' attribute value with a4j:support in extendedDataTableRichfaces:使用 a4j 更改组件的“渲染”属性值:extendedDataTable 中的支持
【发布时间】:2011-04-30 05:22:49
【问题描述】:

我正在尝试将richfaces extendedDataTable 与a4j:support 一起使用来更改rich:panel 的“rendered”属性的值,但它不起作用。

这是我的 JSF 页面的一部分,其中包含一个rich:extendedDataTable 和一个rich:panel:

<h:form id="tabForm">
<rich:extendedDataTable id="myTable" width="500px" height="250px"
value="#{extDataTableBean.extList}" var="dataRow"
selection="#{extDataTableBean.selection}" selectionMode="single">
    <rich:column>
        <f:facet name="header"><h:outputText value="ID" /></f:facet>
        <h:outputText value="#{dataRow.id}"></h:outputText>
    </rich:column>
    <rich:column>
        <f:facet name="header"><h:outputText value="Name" /></f:facet>
        <h:outputText value="#{dataRow.name}"></h:outputText>
    </rich:column>
    <a4j:support id="myTableTakeSelection" action="#{extDataTableBean.takeSelection}" event="onselectionchange" reRender="pane" />
</rich:extendedDataTable>
</h:form>
<rich:panel id="pane" rendered="#{extDataTableBean.showPane}">
<h:form id="secForm">
    <h:outputText value="ID : " />
    <h:inputText id="inTextID"  value="#{extDataTableBean.idFd}" />
    <br/>
    <h:outputText value="Name : " />
    <h:inputText id="inTextName" value="#{extDataTableBean.nameFd}" />
</h:form>
</rich:panel>

rich:panel 'rendered' 属性的默认值为 false(在后台 bean 中设置)。我想要实现的是,当extendedDataTable中的一行被选中时,它的值被更改为true,以便它在GUI中可见。

这是我的支持 bean 的一部分:

/* Constructor */
public ExtDataTableBean(){
    setShowPane(false); // default to false
    loadDataList();
}

/* Load some test data into extendedDataTable */
public void loadDataList(){
    extList = new ArrayList<MyData>();
    MyData e1 = new MyData();
    e1.setId(1);
    e1.setName("name 1");
    extList.add(e1);
    MyData e2 = new MyData();
    e2.setId(2);
    e2.setName("name 2");
    extList.add(e2);
}

public String takeSelection(){
    Iterator iterator = getSelection().getKeys();
    Object key = null;
    while(iterator.hasNext()){
        key = iterator.next();
    }
    /* set the values of inputText with value from selected row */
    setIdFd(extList.get(Integer.parseInt(key.toString())).getId());
    setNameFd(extList.get(Integer.parseInt(key.toString())).getName());
    setShowPane(true);
    return null;
}

public List<MyData> getExtList() {
            /* Lazy loading */
    if(extList == null){
        loadDataList();
    }
    return extList;
}

在 takeSelection( ) 方法中,我使用 setShowPane(true) 将 rich:panel 'rendered' 属性的值更改为 true。问题是富有的:选择一行时,GUI在GUI中不可见。

我做了另一个简单的测试,添加了一个带有 a4j:support 的 h:commandButton 来将 showPane 设置为 true,如下所示:

<h:commandButton id="cmdBtn" value="Show Pane">
    <a4j:support id="cmdBtnSupport" reRender="pane" action="#{extDataTableBean.dispPane}" event="onclick" />
</h:commandButton>

在后台bean中:

public String dispPane(){
    setShowPane(true);
    return null;
}

它按预期工作。 rich:panel 在单击按钮后在 GUI 中可见。

我的代码中遗漏了什么?

【问题讨论】:

  • 只想添加到上面的上面的选项()方法完成了一行时执行的,问题是未呈现,所以在客户端的 html 标签
    不存在。我不确定这个问题是否与 JSF 生命周期有关。

标签: richfaces ajax4jsf


【解决方案1】:

我想我从这个网站找到了问题的原因: http://community.jboss.org/wiki/CommonAjaxRequestsProblems#conditionalRendering

描述问题部分的摘录:

客户端更新:

reRender 属性不应该指向有条件渲染的元素,因为框架不知道在哪里添加之前不在 DOM 中的元素。应该重新渲染此类组件的父级。

所以,在我修改了要重新渲染的部分并将其绑定到如下之后,它现在可以工作了:

<rich:panel id="pane" >
    <h:form id="secForm" rendered="#{extDataTableBean.showPane}" >
        <h:outputText value="ID : " />
        <h:inputText id="inTextID"  value="#{extDataTableBean.idFd}" />
        <br/>
        <h:outputText value="Name : " />
        <h:inputText id="inTextName" value="#{extDataTableBean.nameFd}" />
    </h:form>
</rich:panel>

【讨论】:

  • 嗯,你也可以保留 原样(使用渲染属性),只需将其包含在 中,然后重新渲染 。我认为面板组将呈现一个 div,如果 呈现的评估结果为 false,则不会造成任何伤害,panelGroup 将呈现以便之后重新呈现。
  • 不要关闭问题,如果您对自己的答案感到满意,请将其作为问题的正确答案。
  • 你是对的马科斯。我想只要具有渲染绑定的组件包含在另一个要重新渲染的组件中,它就会起作用。我将按照您的建议将其作为正确答案进行检查。感谢您的帮助。
【解决方案2】:

&lt;rich:extendedDataTable&gt; 是开箱即用的启用 Ajax 的。无需添加&lt;a4j:support&gt; 标签,其目的是为非ajax JSF 组件带来ajax 功能,例如&lt;h:inputText&gt;

所以,试试这个吧:

<rich:extendedDataTable onselectionchange="#{extDataTableBean.takeSelection}">

祝你好运。

【讨论】:

  • 感谢您的回答 Markos,但如果我更改代码以使用用于客户端脚本方法调用(javascript)。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-07-12
  • 2012-02-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多