在 Primefaces 数据表中呈现不同的列答案

【问题标题】：Render different columns in Primefaces datatable在 Primefaces 数据表中呈现不同的列
【发布时间】：2014-08-04 09:28:00
【问题描述】：

我在页面上有一个数据表，其中包含 Unit/Set、Vehicle、Next Maintenance、Day 1、...、Day 7 列。当我更改为其他按日期而不是单位/设置列排序的单选按钮应更改为日期、A 考试、B 考试、C 考试...

我假设我需要创建两个数据表，然后使用渲染属性根据选择的排序来决定显示哪个表。

<p:dataTable id="dataTableEnquiryNextDue" styleClass="editable-datatable"
                rows="20"
                scrollable="true"
                frozenColumns="2"
                rendered=>                                          
                <p:column headerText="Unit/Set" />
                <p:column headerText="Vehicle" />
                <p:column headerText="Next Maintenance" />
                <p:column headerText="Day 1" />
                <p:column headerText="Day 2" />
                <p:column headerText="Day 3" />
                <p:column headerText="Day 4" />
                <p:column headerText="Day 5" />
                <p:column headerText="Day 6" />
                <p:column headerText="Day 7" />|
            </p:dataTable>

这是我的数据表代码，除了我暂时留下了空白，我相信我必须制作某种 bean，我认为它将获得单选按钮的值，然后我将拥有像

rendered="#{Bean.searchSort == Unit}

或

rendered="#{Bean.searchSort == Date}

我用下面的代码创建了一个bean

@ManagedBean

@ViewScoped 公共类 DepotWorkloadBean 实现可序列化 {

public enum Sort    {
    UNIT, DATE
}

private Sort sortMode = Sort.UNIT;

public Sort getSortMode() {
    return sortMode;
}

public void enterUnitSort() {
    sortMode = Sort.UNIT;       
}

public void enterDateSort() {
    sortMode = Sort.DATE;
}

}

在我的表格中添加了一行

rendered="#{depotWorkloadBean.sortMode == 'UNIT'}"

我也以相同的方式创建了另一个表，但使用

rendered="#{depotWorkloadBean.sortMode == 'DATE'}"

和不同的列。

对于我写的单选按钮

            <p:radioButton id="UnitSetNumber" for="customRadio3" itemIndex="0"  
        onchange="#{depotWorkloadBean.enterUnitSort}" update="dataTableDaySortUnit dataTableDaySortDate"/>

            <p:radioButton id="DateDue" for="customRadio3" itemIndex="1"
        onchange="#{depotWorkloadBean.enterDateSort}" update="dataTableDaySortUnit dataTableDaySortDate"/>

目前我收到一条错误消息

“DepotWorkloadBean”类没有“enterUnitSort”属性。

这很令人困惑，因为它显然确实如此，而且据我所知，我已经正确拼写了所有内容。我仍然不确定我的方法是否真的正确，所以再次感谢任何建议。

这是我的 selectOneRadio

                <p:selectOneRadio id="customRadio3" layout="custom">
                <f:selectItem itemLabel="UnitSetNumber" itemValue="1" binding="{depotWorkloadBean.enterUnitSort}"
                update=":mainForm"/>
                <!-- <f:ajax listener="#{depotWorkloadBean.enterUnitSort}" render="@all"/> -->
                <f:selectItem itemLabel="DateDue" itemValue="2" binding="{depotWorkloadBean.enterDateSort}"
                update=":mainForm"/>
                <!-- <f:ajax listener="#{depotWorkloadBean.enterDateSort}" render="@all"/> -->
                <f:selectItem itemLabel="DueInValue" itemValue="3" />
            </p:selectOneRadio>

编辑：这是我更新的 selectOneRadio

<p:selectOneRadio id="customRadio3" layout="custom"
            value="#{depotWorkloadBean.sortMode}"
            update=":mainForm">
                <f:selectItem itemLabel="UNIT.name" itemValue="UNIT" value="#{depotWorkloadBean.sortMode}"
                var="UNIT"/>
                <!-- <f:ajax listener="#{depotWorkloadBean.enterUnitSort}" render="@all"/> -->
                <f:selectItem itemLabel="DATE.name" itemValue="DATE" value="#{depotWorkloadBean.sortMode}"
                var="DATE"/>
                <!-- <f:ajax listener="#{depotWorkloadBean.enterDateSort}" render="@all"/> -->
                <f:selectItem itemLabel="DueInValue" itemValue="3" />
            </p:selectOneRadio>

这是我更新的 bean

@ManagedBean
@ViewScoped
public class DepotWorkloadBean implements Serializable {



   public enum Sort {
        UNIT, DATE
    }

    private Sort sortMode = Sort.UNIT;

    public Sort getSortMode() {
        return sortMode;
    }

    public Sort[] getSortValues() {
        return Sort.values();
    }

    public void setSortMode(Sort sortMode) {
        this.sortMode = sortMode;
    }
}

编辑：经过一番思考，我采用了一种新方法，所以现在我的单选按钮组是这样的：

    <!-- <f:facet name="actions"> -->
        <p:selectOneRadio id="customRadio3" layout="custom"
        partialSubmit="true"
        value="#{depotWorkloadBean.selectSort}">
            <p:ajax update="mainForm" listener="#{depotWorkloadBean.updateSortMode}"/>
            <f:selectItem itemLabel="UnitSet" itemValue="UnitSet"/>        
            <f:selectItem itemLabel="DateDue" itemValue="DateDue"/>            
            <f:selectItem itemLabel="DueInValue" itemValue="DueInValue"/>                     
        </p:selectOneRadio>
    <!-- </f:facet> -->

我已经注释掉了 facet 标签，因为它会导致错误 "javax.servlet.ServletException" 我不知道为什么。

我的表格和以前一样，只是现在渲染的行是

rendered="#{depotWorkloadBean.sortMode == 'UnitSet'}">

'DateDue' 类似。而我的bean如下：

@ManagedBean
@ViewScoped
public class DepotWorkloadBean implements Serializable {

private static final Log log = LogFactory.getLog(DepotWorkloadBean.class);

/*public enum Sort {
    UNIT, DATE
}

private Sort sortMode = Sort.UNIT;*/

private String sortMode = "UnitSet";
private String selectSort = "UnitSet";

public void updateSortMode () {
    log.info("In updateSortMode " + " State [" + selectSort + "]");
    sortMode = selectSort;
}

public String getSortMode() {
    return sortMode;
}

public void setSortMode(String sortMode) {
    this.sortMode = sortMode;
}

public String getSelectSort() {
    return selectSort;
}

public void setSelectSort(String selectSort) {
    log.info("Setting selectSort to [" + selectSort + "]");
    this.selectSort = selectSort;
    sortMode = selectSort;
}

我刚刚发现了日志，它似乎非常有用。当我的页面构建并在单选按钮之间单击时，我的日志记录“在 updateSortMode State []”“将 selectSort 设置为 State []”，因此该方法显然有问题。我应该提到的另一件事是我的单选按钮实际上显示在同一个 panelGrid 中的更下方，就像这样..

        <p:row>
    <p:column>
        <p:radioButton id="UnitSetNumber" for="customRadio3" itemIndex="0"/>
    </p:column>    
    <p:column>
        <h:outputLabel for="UnitSetNumber" value="Unit/set number" />
    </p:column>        
    </p:row>
    <p:row>
    <p:column>
        <p:radioButton id="DateDue" for="customRadio3" itemIndex="1"/>
    </p:column>    
    <p:column>
        <h:outputLabel for="DateDue" value="Date due" />
    </p:column>        
    </p:row>
    <p:row>
    <p:column>
        <p:radioButton id="DueInValue" for="customRadio3" itemIndex="2" />
    </p:column>    
    <p:column>
        <h:outputLabel for="DueInValue" value="Due in value" />
    </p:column>        
    </p:row>

不确定这是否会影响 ajax 监听器？

谢谢

【问题讨论】：

标签： jsf primefaces datatable radio-button javabeans

【解决方案1】：

您不需要onchange 监听器，update= 属性就可以完成这项工作。

将<p:selectOneRadio> 与嵌套的<f:selectitems> 一起使用，这将设置您的bean 的sortMode 值（您可能需要一个转换器）。然后确保两个表的父组件在选择时更新。这将使用新设置的sortMode 值重新评估表的rendered= 属性。

示例：观点：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>TEST</title>
    </h:head>
    <h:body>
        <h:form>
            <p:selectOneRadio id="radiogroup"
                              value="#{testController.selectedValue}">
                <f:ajax render=":content"/>
                <f:selectItems value="#{testController.valuesTypes}"
                               var="val"
                               itemLabel="#{val.name()}"
                               itemValue="#{val}"/>
            </p:selectOneRadio>
        </h:form>
        <h:form id="content">
            <p:outputPanel rendered="#{testController.selectedValue eq 'VALUEA'}">
                Value A panel
            </p:outputPanel>
            <p:outputPanel rendered="#{testController.selectedValue eq 'VALUEB'}">
                Value B panel
            </p:outputPanel>
            <p:outputPanel rendered="#{testController.selectedValue eq 'VALUEC'}">
                Value C panel
            </p:outputPanel>
        </h:form>
    </h:body>
</html>

还有豆子：

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

@ManagedBean
@ViewScoped
public class TestController {

    public enum ValueTypes {

        VALUEA,
        VALUEB,
        VALUEC
    }

    private ValueTypes selectedValue;

    public ValueTypes getSelectedValue() {
        return selectedValue;
    }

    public void setSelectedValue(ValueTypes selectedValue) {
        this.selectedValue = selectedValue;
    }

    @PostConstruct
    public void init() {
        selectedValue = ValueTypes.VALUEA;
    }

    public ValueTypes[] getValuesTypes() {
        return ValueTypes.values();
    }
}

【讨论】：

我已将我的 selectOneRadio 添加到我的问题中，我也刚刚尝试添加绑定。您还可以看到我之前尝试过的尝试的 ajax 代码，但也有问题。不确定绑定是否正确，但不确定我还能使用什么？
我写了 '' 和其他类似单选按钮。我也有 '' 并已将您建议的内容添加到我的 bean 中，但没有确定它们是要替换我已经拥有的还是补充的，在这种情况下我应该在哪里引用它们？
你没有你的 enter*() 函数。如果 p:selectOneRadio 的 value= 属性指向它，成员变量 sortMode 将自动更新，前提是您的 bean 具有适当的 getter 和 setter（您可以使用“#{depotWorkloadBean.sortMode}”）
我已经尝试了一些不同的方法并且得到“DepotWorkloadBean$Sort 无法转换为 javax.faces.model.SelectItem”我将在我的问题中发布我更新的代码...
你需要为 Sort.class 实现一个转换器。见mkyong.com/jsf2/custom-converter-in-jsf-2-0。否则，您可以尝试使用 Sort 对象的名称作为项目值。然后，您应该在您的 bean 中添加一个带有正确 getter/setter 的 sortName 属性。