Question

通过了以下演示示例：

https://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml

我可以将完整示例显示为primefaces-test-master并以mvn clean jetty：run-exploded的方式运行

我使用'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以及“汽车”的每个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的显示顺序（上或下），则有时实际上不会在dataTable中显示每个“年，品牌，颜色，价格和已售出”

我对p：selectManyCheckbox和p：dataTable做错了吗？

（1）如何对所有五个图像进行“年份，品牌，颜色，价格和出售”。（2）显示两页“年份，品牌” （3）选择“年份，品牌，颜色”，尽管选择了（颜色），但仅显示“年份，品牌”！

请参见以下代码：https://www.dropbox.com/s/vfugj0fppejtti7/primefaces-test-master.zip?dl=0

Answer 1

我对ajax和p：dataTable有相同的问题，我解决了将p：dataTable插入p：panel的问题，而对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>

Answer 2

您正在执行不一致的操作，p:columnToggler使用JavaScript来显示和隐藏那些dataTable列，但是使用 selectManyCheckbox 则使用的是jsf某些托管bean呈现某些列，首先要坚持其中的一个，因为 selectManyCheckbox 和它的托管bean carService.selectedItems不知道您使用p:columnToggler隐藏或显示了什么。 / p>

无论如何，如果您要创建具有动态列的p:dataTable，则应按照此example中的步骤进行操作。

编辑1：如Kukeltje注释中所述，如果确实需要管理显示和隐藏后备bean中的列并且仍然能够使用columnToggler

，那么使用p：column的visible属性是代替使用render的方法。

p：dataTable不会显示每个p：selectManyCheckbox

2 个答案: