【问题标题】:p:dataTable doesn't display each p:selectManyCheckbox selectedp:dataTable 不显示每个选定的 p:selectManyCheckbox
【发布时间】:2020-01-01 17:57:27
【问题描述】:

传递了以下的演示示例:

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 和“car”的每个 p:column 以及其他列:

<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:column headerText 在 p:selectManyCheckbox 的选定项目上显示的订单(向上或向下),那么有时实际上不会在 dataTable 中显示每个“年份、品牌、颜色、价格和销售” .

我对 p:selectManyCheckbox 和 p:dataTable 做错了吗?

(1) 所有五张图片“年份、品牌、颜色、价格和销量”如何。 (2) 显示两页'年份,品牌' (3) 选择“年份,品牌,颜色,但它只显示''年份,品牌',虽然选择了(颜色)!

查看代码:https://www.dropbox.com/s/vfugj0fppejtti7/primefaces-test-master.zip?dl=0

【问题讨论】:

  • 尝试在面板中插入 tblCars 并使用 ajax 更新面板,我有同样的问题,这已经解决了
  • 谢谢。你有拉的例子吗?
  • 是的,我添加一个新答案

标签: primefaces


【解决方案1】:

我在使用 ajax 和 p:dataTable 时遇到了同样的问题,我解决了它在 p:panel 中插入 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>

【讨论】:

  • 奇怪的是,更新数据表周围的面板使其工作。你这是什么版本的?
  • @Kukeltje 是的很奇怪,我在 2.2 和 2.3 jsf 以及 6.9 和 7.9 primefesis 版本中遇到了这个问题
  • 1:它的 PrimeFaces,2:6.9 和 7.9 不存在
  • @Kukeltje 是的很奇怪,我在 2.2 和 2.3 jsf 以及 6.0 和 7.0 primefesis 版本中遇到了这个问题,对不起我的错
  • 您的示例与我最初所做的相同。一旦我上下更改了“sortBy”的顺序并选择了“p:selectManyCheckbox”,它现在不会出现在“p:dataTable”和“p:column”上。
【解决方案2】:

您正在做一些不一致的事情,p:columnToggler 使用 javascript 来显示和隐藏这些 dataTable 列,但是使用您的 selectManyCheckbox 您正在使用 jsf 一些托管 bean 来不呈现一些列,首先坚持其中之一,因为 selectManyCheckbox 和它的托管 bean carService.selectedItems 不知道您使用 p:columnToggler 隐藏或显示了什么。

无论如何,如果您尝试创建一个具有动态列的p:dataTable,那么您应该按照example 中的方式进行操作。

编辑 1: 如 Kukeltje 评论中所述,如果您真的需要管理在支持 bean 中显示和隐藏列并且仍然能够使用 columnToggler

【讨论】:

  • 你可以以某种方式组合它们...但不使用渲染但可见是要走的路...stackoverflow.com/questions/25487243/…
  • 如果您使用可见而不是渲染,这是真的,感谢@Kukeltje 提供的信息
  • 我尝试使用“数据表 - 动态列”,但我无法让它显示所有“年份、品牌、颜色、价格和销售”来显示数据表每个“列”。 IMO 没有一个简单的 PrimeFaces 版本可以显示“p:dataTable”及其“h:panelGrid”。 “模板”不好用。
猜你喜欢
  • 2020-01-27
  • 2012-09-07
  • 1970-01-01
  • 1970-01-01
  • 2014-12-08
  • 1970-01-01
  • 1970-01-01
  • 2016-05-15
  • 1970-01-01
相关资源
最近更新 更多