简体   繁体   English

Primefaces数据表中的从属列

[英]Dependent columns in Primefaces datatable

I'm using an editable Primefaces p:datatable to show the data to the user. 我正在使用可编辑的Primefaces p:datatable向用户显示数据。 In this datatable, I have a p:column with a h:selectOneMenu , and another one with a p:selectBooleanCheckbox . 在此数据表中,我有一个带有h:selectOneMenup:column和另一个带有p:selectBooleanCheckboxp:selectBooleanCheckbox

I want to check or uncheck and disable or enable the checkbox depending on the value selected in the h:selectOneMenu . 我想根据h:selectOneMenu选择的值来选中或取消选中并禁用或启用复选框。

If I only had one h:selectOneMenu and one p:selectBooleanCheckbox , I'd use a p:ajax to attach a listener to the change event, and I'd manipulate the p:selectBooleanCheckbox in this method. 如果我只有一个h:selectOneMenu和一个p:selectBooleanCheckbox ,我将使用p:ajax将侦听器附加到change事件,然后在此方法中操作p:selectBooleanCheckbox But I have a pair of h:selectOneMenu and p:selectBooleanCheckbox per row and I don't know how to do this. 但是我每行有一对h:selectOneMenup:selectBooleanCheckbox ,我不知道该怎么做。

This is what I tried: 这是我尝试的:

<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>

The post Retrieving other component's client ID in JSF 2.0 describes how to retrieve ids of other components in a page. JSF 2.0中的“ 检索其他组件的客户机ID”一文描述了如何在页面中检索其他组件的ID In my opinion, the #{p:component('sampleButton')} should find the next component having this ID in the component tree - this should be the same row. 我认为, #{p:component('sampleButton')}应该在组件树中找到具有此ID的下一个组件-这应该是同一行。

Alternatively, you should be able to rerender the whole row via JSF 2 #{component.parent.clientId} functionality (measure out, how many "parent" steps you need, eg #{component.parent.parent.clientId} ). 或者,您应该能够通过JSF 2 #{component.parent.clientId}功能重新呈现整个行(测量出您需要多少个“父”步骤,例如#{component.parent.parent.clientId} )。

Hope it helps, else just add comments... :-) 希望对您有所帮助,否则只需添加评论... :-)

I can't imagine why you are unsatisfied with simple update="checkboxId" but what you can try is updating component through widgetVar which you can generate during page render. 我无法想象为什么您对简单的update="checkboxId"不满意,但是您可以尝试通过在页面渲染期间生成的widgetVar更新组件。

Tiny example: 小例子:

<?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>

Backing 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());
    }
}

And Data object: 和数据对象:

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;
    }
}

I still don't know why my approach didn't work. 我仍然不知道为什么我的方法行不通。

In the end, I added a listener to the p:ajax component to manipulate the SelectBooleanCheckbox in the managed bean 最后,我在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);
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM