使用 p:picklist 到大型项目列表

Question

我有使用 Primefaces 中的选择列表获取项目列表的当前代码：

    <p:pickList showSourceFilter="true" showTargetFilter="true" filterMatchMode="contains"  label="#{msg.dataview_label_net}" id="pickListNet" converter="firstItemConverter" value="#{dataViewBean.net}" var="node" itemLabel="#{item.name}" itemValue="#{item}" />

但是，我在 Google Chrome 显示此列表时遇到性能问题。

我的后端很快，但是要在 Primefaces 中显示所有项目需要很长时间才能呈现。是否可以在选择列表中使用一些分页或一些类似延迟加载的方法？

我的清单中大约有 3000 件商品。我在这里尝试了一个 js 修复来改进： https://code.google.com/p/primefaces/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Type%20Status%20Priority%20TargetVersion%20Reporter%20Owner%20Summary&groupby=&sort=&id=7655

但对我来说效果不佳。

Answer 1

不，抱歉，撰写本文时 PrimeFaces 版本 (5.1/5.2-SNAPSHOT) 不支持此功能。通过查看 PrimeFaces 文档可以发现

Answer 2

此问题的最佳解决方案是尝试另一个组件，例如 DataTable。

我使用带有多个复选框和延迟滚动的 DataTable 来仅显示部分列表。我的加载时间从 1 分钟 15 秒减少到 15 秒。

Answer 3

我正在使用 primeng，我遇到了分页问题，我从 API 中获取数据，每次调用 20 个元素，解决方案是通过 className 获取源的列表元素 UL并检查滚动是否在限制内，如果是，我用 page+1 重新调用 api 并连接数据

使用 p:picklist 到大型项目列表

Using p:picklist to a large item list

primefaces