Primefaces 数据表中的相关列答案

【问题标题】：Dependent columns in Primefaces datatablePrimefaces 数据表中的相关列
【发布时间】：2013-12-19 04:39:17
【问题描述】：

我正在使用可编辑的 Primefaces p:datatable 向用户显示数据。在这个数据表中，我有一个p:column 和一个h:selectOneMenu，另一个是p:selectBooleanCheckbox。

我想根据h:selectOneMenu 中选择的值选中或取消选中并禁用或启用复选框。

如果我只有一个h:selectOneMenu 和一个p:selectBooleanCheckbox，我会使用p:ajax 将一个侦听器附加到更改事件，并在此方法中操作p:selectBooleanCheckbox。但我每行有一对h:selectOneMenu 和p:selectBooleanCheckbox，我不知道该怎么做。

这是我尝试过的：

<h:form>
    <p:dataTable var="appointment" value="#{prescController.appointmentsToday}" editable="true" id="tblAppointments">
        <p:ajax event="rowEdit"
            listener="#{prescController.onEdit}" update=":messages" />

        <p:column sortBy="presc.drug" headerText="Drug">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{appointment.presc.drug.name}" />
                </f:facet>

                <f:facet name="input">
                    <h:selectOneMenu value="#{appointment.presc.drug}"
                        converter="#{drugConverter}" required="true">
                        <f:selectItem itemLabel="" noSelectionOption="true" />
                        <f:selectItems value="#{prescController.drugs}"
                            var="drug" itemLabel="#{drug.name}" />

                        <p:ajax update="autoAmount" />
                    </h:selectOneMenu>
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column sortBy="presc.autoAmount" headerText="Auto amount">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="Y"
                        rendered="#{not empty appointment.presc.drug.rules and appointment.presc.autoAmount}" />
                    <h:outputText value="N"
                        rendered="#{empty appointment.presc.drug.rules or not appointment.presc.autoAmount}" />
                </f:facet>
                <f:facet name="input">
                    <p:selectBooleanCheckbox id="autoAmount"
                        value="#{not empty appointment.presc.drug.rules and appointment.presc.autoAmount}"
                        disabled="#{appointment.presc.drug.name eq 'somethingsomething'}" />
                </f:facet>
            </p:cellEditor>
        </p:column>


        <p:column>
            <p:rowEditor />
        </p:column>
    </p:dataTable>
</h:form>

【问题讨论】：

嗨 Herreria，您只想执行这个 selectOneMenu 并且只渲染一个连接的表格行的字段 - 而不将整个表格发送回服务器并重新渲染？
是的，L-Ray，这就是我想要的。有可能吗？
您到底面临什么问题？您究竟是如何未能指定<p:ajax update="checkboxId">“通常的方式”，就好像您不在数据表中一样？
我尝试将<p:ajax update="checkboxId" /> 与<p:selectBooleanCheckbox id="checkboxId" disabled="#{entity.subentity.name eq 'somethingsomething'}" /> 结合使用（其中entity 是p:dataTable 的属性var 的值，subentity 是我在h:selectOneMenu 中选择的值）但是 AJAX 响应总是一样的；当我选择名称为“somethingsomething”的“子实体”时，它不会添加 disabled 属性
显示一些代码会有所帮助

标签： jsf jsf-2 primefaces

【解决方案1】：

我仍然不知道为什么我的方法不起作用。

最后，我在p:ajax组件中添加了一个监听器来操作托管bean中的SelectBooleanCheckbox

<p:ajax listener="#{prescBean.onDrugSelected}" update="autoAmount" />

public void onDrugSelected(AjaxBehaviorEvent event) {
    Drug drug = (Drug) ((UIOutput) event
            .getSource()).getValue();
    boolean hasRules = drug.getRules().size() > 0;

    SelectBooleanCheckbox cbAutoAmount = (SelectBooleanCheckbox) ComponentUtils
            .findComponent(FacesContext.getCurrentInstance().getViewRoot(),
                    "autoAmount");

    cbAutoAmount.setDisabled(!hasRules);
    cbAutoAmount.setValue(hasRules);
}

【讨论】：

【解决方案2】：

我无法想象您为什么对简单的 update="checkboxId" 不满意，但您可以尝试通过在页面渲染期间生成的 widgetVar 更新组件。

小例子：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Table Example</title>
</h:head>
<h:body>
    <h:form prependId="false">
        <p:dataTable var="data" value="#{tableBean.data}">
            <p:column headerText="Command">
                <p:commandButton value="Toggle" actionListener="#{tableBean.toggleSelection(data.id)}"
                    update="@widgetVar(tableCheckboxComponent_#{data.id})" />
            </p:column>
            <p:column headerText="Value">
                <h:outputText value="#{data.value}" />
            </p:column>
            <p:column headerText="Selected">
                <p:selectBooleanCheckbox widgetVar="tableCheckboxComponent_#{data.id}" value="#{data.selected}" />
            </p:column>
        </p:dataTable>
    </h:form>
</h:body>
</html>

支持 bean：

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class TableBean {
    private Map<String, MyData> data;


    public List<MyData> getData(){
        return new ArrayList<MyData>(data.values());
    }

    public TableBean() {
        data = new HashMap<String, MyData>();
        for (int i = 0; i<22; i++) {
            String id = "id" + Integer.toString(i);
            data.put(id, new MyData( id , i));
        }
    }

    public void toggleSelection(String id) {
        MyData myData = data.get(id);
        myData.setSelected(!myData.isSelected());
    }
}

和数据对象：

public class MyData {
    private String id;
    private boolean selected;
    private int value;

    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public int getValue() {
        return value;
    }
    public void setValue(int value) {
        this.value = value;
    }

    public boolean isSelected() {
        return selected;
    }

    public void setSelected(boolean selected) {
        this.selected = selected;
    }   

    public MyData(String id, int value) {
        this.id = id;
        this.value = value;
        this.selected = false;
    }
}

【讨论】：

【解决方案3】：

Retrieving other component's client ID in JSF 2.0 的帖子描述了如何检索页面中其他组件的 id。在我看来，#{p:component('sampleButton')} 应该在组件树中找到具有此 ID 的下一个组件 - 这应该是同一行。

或者，您应该能够通过 JSF 2 #{component.parent.clientId} 功能重新呈现整行（测量出您需要多少“父”步骤，例如 #{component.parent.parent.clientId}）。

希望它有所帮助，否则只需添加 cmets... :-)

【讨论】：

如果组件已经在同一个命名容器中，这是完全没有必要的。