通过了以下演示示例:
https://www . prime faces . org/showcase/ui/data/datatable/basic . XHTML
我可以将完整的示例显示为primeface测试主机,并作为mvn clean jetty运行:运行分解
我使用“p:selectManyCheckbox”创建了一个显示器来显示我所有的年份,品牌,颜色,价格
<p:selectManyCheckbox id="carColumns" value="#{carService.selectedItems}">
<f:selectItem itemLabel="Year" itemValue="Year"/>
<f:selectItem itemLabel="Brand" itemValue="Brand"/>
<f:selectItem itemLabel="Colour" itemValue="Colour"/>
<f:selectItem itemLabel="Price" itemValue="Price"/>
<f:selectItem itemLabel="Sold" itemValue="Sold"/>
<p:ajax listener="#{carService.selectedItemsChanged}" update="formCars:tblCars"/>
</p:selectManyCheckbox>
然后它显示p: dataTable和“car”的每个p:列以及其他:
<p:dataTable id="tblCars" var="car" value="#{dtBasicView.cars}" paginator="true"
rows="100"
multiViewState="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100"
resizableColumns="true"
draggableColumns="true"
scrollWidth="100%">
<f:facet name="header">
<p:commandButton id="columnTogglerCars" type="button" value="Columns" style="float:right"
icon="pi pi-align-justify"/>
<p:columnToggler datasource="tblCars" trigger="columnTogglerCars"/>
</f:facet>
<p:column headerText="Id" rendered="true">
<h:outputText value="#{car.id}"/>
</p:column>
<p:column headerText="Year" sortBy="#{car.year}" rendered="#{carService.yearColumnRendered}">
<h:outputText value="#{car.year}"/>
</p:column>
<p:column headerText="Brand" sortBy="#{car.brand}" rendered="#{carService.brandColumnRendered}">
<h:outputText value="#{car.brand}"/>
</p:column>
<p:column headerText="Colour" sortBy="#{car.colour}" rendered="#{carService.colourColumnRendered}">
<h:outputText value="#{car.colour}"/>
</p:column>
<p:column headerText="Price" sortBy="#{car.price}" rendered="#{carService.priceColumnRendered}">
<h:outputText value="#{car.price}"/>
</p:column>
<p:column headerText="Sold" sortBy="#{car.sold}" rendered="#{carService.soldColumnRendered}">
<h:outputText value="#{car.sold}"/>
</p:column>
</p:dataTable>
如果我在p:selectManyCheckbox的选定项目上更改p:column headerText显示的订单(向上或向下),有时实际上不会显示“年份、品牌、颜色、价格
p:selectManyCheckbox和p:dataTable我做错了吗?
(1)如何所有五个图像“年份,品牌,颜色,价格
代码见:https://www . Dropbox . com/s/vfugj 0 fppejtti 7/prime faces-test-master . zip?dl=0
我在ajax和p: dataTable上遇到了同样的问题,我解决了它,在p:面板中插入p:dataTable,并且使用ajax我更新了面板,一个例子
<p:panel id="panel-update">
<p:dataTable id="tblCars" var="car" value="#{dtBasicView.cars}" paginator="true"
rows="100"
multiViewState="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100"
resizableColumns="true"
draggableColumns="true"
scrollWidth="100%">
<f:facet name="header">
<p:commandButton id="columnTogglerCars" type="button" value="Columns" style="float:right"
icon="pi pi-align-justify"/>
<p:columnToggler datasource="tblCars" trigger="columnTogglerCars"/>
</f:facet>
<p:column headerText="Id" rendered="true">
<h:outputText value="#{car.id}"/>
</p:column>
<p:column headerText="Year" sortBy="#{car.year}" rendered="#{carService.yearColumnRendered}">
<h:outputText value="#{car.year}"/>
</p:column>
<p:column headerText="Brand" sortBy="#{car.brand}" rendered="#{carService.brandColumnRendered}">
<h:outputText value="#{car.brand}"/>
</p:column>
<p:column headerText="Colour" sortBy="#{car.colour}" rendered="#{carService.colourColumnRendered}">
<h:outputText value="#{car.colour}"/>
</p:column>
<p:column headerText="Price" sortBy="#{car.price}" rendered="#{carService.priceColumnRendered}">
<h:outputText value="#{car.price}"/>
</p:column>
<p:column headerText="Sold" sortBy="#{car.sold}" rendered="#{carService.soldColumnRendered}">
<h:outputText value="#{car.sold}"/>
</p:column>
</p:dataTable>
</p:panel>
现在使用ajax可以更新面板
<p:selectManyCheckbox id="carColumns" value="#{carService.selectedItems}">
<f:selectItem itemLabel="Year" itemValue="Year"/>
<f:selectItem itemLabel="Brand" itemValue="Brand"/>
<f:selectItem itemLabel="Colour" itemValue="Colour"/>
<f:selectItem itemLabel="Price" itemValue="Price"/>
<f:selectItem itemLabel="Sold" itemValue="Sold"/>
<p:ajax listener="#{carService.selectedItemsChanged}" update="formCars:panel-update"/>
</p:selectManyCheckbox>
你正在做一些不一致的事情,p:columnToggler
使用 javascript 来显示和隐藏那些 dataTable 列,但是使用 selectManyCheckbox,你正在使用 jsf 一些托管 bean 来不渲染一些列,首先坚持其中一个,作为 selectManyCheckbox 和它管理的 bean carService.selectedItems
不知道你使用 p 隐藏或显示了什么:列切换器
。
无论如何,如果您尝试创建一个具有动态列的p: dataTable
,那么您应该按照此示例中的方式进行操作。
编辑 1:如 Kukeltje 注释中所述,如果您真的想要管理在支持豆中的显示和隐藏列并且仍然能够使用 columnToggler