[英]Render different columns in Primefaces datatable
I have a datatable on a page with columns Unit/Set, Vehicle, Next Maintenance, Day 1,...,Day 7. I have two radio buttons also to change the sorting of the data, when I change to the other radio button which sorts by Date instead of Unit/Set the columns should change to Date, A Exams, B Exams, C Exams,... 我的页面上有一个数据表,其中有“单位/设置”,“车辆”,“下次维护”,“第1天,...,第7天”列。当我更改为另一个单选按钮时,我还有两个单选按钮还可以更改数据的排序按日期而不是单位/设置排序的列应更改为日期,A考试,B考试,C考试...
I assume I need to create two datatables and then use the rendered attribute to decide which table is shown depending on which sort is selected. 我假设我需要创建两个数据表,然后使用rendered属性决定根据选择哪种排序显示哪个表。
<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>
This is my code for the datatable, except I have left the rendered blank at the minute, I believe I'll have to make some kind of bean, I think it will get the value of the radio buttons then I will have something like 这是我用于数据表的代码,除了我暂时没有将呈现的空白留空,我相信我必须制造某种bean,我认为它将获得单选按钮的值,然后我会得到类似
rendered="#{Bean.searchSort == Unit}
or 要么
rendered="#{Bean.searchSort == Date}
I have created a bean with the following code 我用以下代码创建了一个bean
@ManagedBean
@ViewScoped public class DepotWorkloadBean implements Serializable { @ViewScoped公共类DepotWorkloadBean实现了Serializable {
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;
}
} }
And in my table added the line 并在我的表格中添加了这一行
rendered="#{depotWorkloadBean.sortMode == 'UNIT'}"
I have also created my other table the same way but with 我也用相同的方式创建了另一个表,但是
rendered="#{depotWorkloadBean.sortMode == 'DATE'}"
and different columns. 和不同的列。
For my radio buttons I have written 我写的单选按钮
<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"/>
At the moment I am getting an error saying 目前,我收到一个错误消息
The class 'DepotWorkloadBean' does not have the property 'enterUnitSort'. 类“ DepotWorkloadBean”不具有属性“ enterUnitSort”。
This is quite confusing as it clearly does and as far as I can tell I have spelt everything correctly. 就我所知,我已经正确拼写了一切,这确实很令人困惑。 I'm still not sure if my approach is actually correct though, so again any advice will be appreciated. 我仍然不确定我的方法是否正确,因此再次提出任何建议。
Here is my selectOneRadio 这是我的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>
EDIT: Here is my updated 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>
And here is my updated bean 这是我更新的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;
}
}
EDIT: After a bit of thinking I have taken a new approach, so now my radio button group is like so: 编辑:经过一番思考,我采取了一种新方法,所以现在我的单选按钮组是这样的:
<!-- <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> -->
I have commented out the facet tag as it causes the error "javax.servlet.ServletException"
and I have no idea why. 我已经注释掉facet标签,因为它导致错误"javax.servlet.ServletException"
,我也不知道为什么。
My tables are as they were before except the rendered line is now 我的表和以前一样,只是现在的渲染行
rendered="#{depotWorkloadBean.sortMode == 'UnitSet'}">
and similar for 'DateDue'. 和“ DateDue”类似。 And my bean is as follows: 我的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;
}
I have only just found out about the log and it seems very useful. 我只是发现了日志,这似乎非常有用。 When my page builds and I click between the radio buttons my log records 'In updateSortMode State []' "Setting selectSort to State []" so there is clearly something going wrong in the method. 构建页面并单击单选按钮之间时,我的日志记录为“在updateSortMode状态[]中”“将selectSort设置为状态[]”,因此该方法显然存在问题。 The other thing I should mention is my radio buttons are actually displayed further down in the same panelGrid, like so.. 我还要提到的另一件事是,单选按钮实际上显示在同一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>
Not sure if that would affect the ajax listener? 不确定是否会影响ajax监听器?
Thanks 谢谢
You don't need an onchange
listener, the update=
attribute will do the job. 您不需要onchange
侦听器, update=
属性将完成此工作。
Use a <p:selectOneRadio>
with a nested <f:selectitems>
that will set the sortMode
value of your bean (you might need a converter). 将<p:selectOneRadio>
与嵌套的<f:selectitems>
,这将设置bean的sortMode
值(您可能需要一个转换器)。 Then ensure the parent component of both tables is updated upon selection. 然后,确保在选择后更新两个表的父组件。 This will re-evaluate the rendered=
attributes of your tables with the newly set sortMode
valule. 这将使用新设置的sortMode
值重新评估表的rendered=
属性。
Example: The view: 示例:视图:
<!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>
And the bean: 和豆:
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();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.