如何在没有 JSF 标记库（h:datatable 或 ui:repeat）的情况下编写 <table> 标记，但仍使用 JSF 来控制页面流

Posted 2023-02-19

【中文标题】如何在没有 JSF 标记库（h:datatable 或 ui:repeat）的情况下编写 <table> 标记，但仍使用 JSF 来控制页面流

【英文标题】：How to write <table> markup without JSF tag libraries (h:datatable or ui:repeat) but still use JSF for controlling page flow

【发布时间】：2012-10-10 04:25:04

【问题描述】：

我有不同大小的表格：12 列，最多 1800 行。将其呈现给用户需要 8 秒。我目前使用h:dataTable。我尝试ui:repeat 从由 JSF 管理的 Java List 对象中获取行数据。虽然这工作正常，但 8 秒渲染表格是不可接受的。我正在尝试寻找其他方法来做到这一点，但需要将JSF 保留为我的controller 以获取页面上的操作按钮。换句话说，我想为托管 bean 方法创建 'table markupto send to thepage myselfand then still associate actions onh:commandButtons`。有没有办法做到这一点？

我能想到的唯一方法是使用jquery 或ajax 来创建表格标记，尽管我对JSF 以外的其他技术不熟悉UI 开发。也许我会以某种方式将其传递给客户端使成为。唯一的问题是我不知道如何从我的列表中生成标记，其次我将如何在我的h:commandButtons 当前在我的Xhtml 文件中注入它。

有谁知道我可以如何解决这个问题而不必完全撕掉 JSF？我遇到的一个主要问题是，业务需求表明我们无法对数据表进行分页（例如：Next / Back 按钮一次显示 100 个）。所以，可能我在想我可以通过 Ajax 调用服务器来做到这一点，并在页面准备好后一次获得 100 行，并在幕后将新行附加给用户。这将是“感知”的加载速度，但我根本不知道该怎么做。

【参考方案1】：

8 秒对于 12 列上高达 1800 行的数据来说还不错。 10~100 行不到一秒就完成了，对吧？

在继续此之前，您是否绝对肯定所有这 1800 行都应该一次显示？这不是对用户很不友好吗？用户不需要 Ctrl+F 来查找它正在寻找的信息吗？那不是很烦人吗？为什么不引入过滤（搜索字段）和分页，就像 Google 所做的那样，以理智和用户友好的方式呈现无数结果？

无论如何，您可以考虑使用PrimeFaces<p:dataTable> 的“按需数据”选项，其中数据在滚动期间通过<p:dataTable liveScroll="true"> 由ajax 加载。另请参阅showcase example。不需要自制代码，也不需要手动摆弄 jQuery。 PrimeFaces 在幕后完成了这一切。

如果您出于某种原因不想使用 PrimeFaces，那么您可以考虑将 OmniFaces <o:componentIdParam> 与一些 jQuery “实时滚动”插件结合使用。另请参阅its (snapshot) showcase page 中的最后一个示例以获取启动示例（应该很容易调整为通过点击滚动底部而不是单击来触发）。

【讨论】：

其实我说错了，是18列1800行。我喜欢您使用 PrimeFaces 或 OmniFaces 进行“实时”滚动实现的想法。不幸的是，我不能使用这些 API，因为它们没有得到我公司的批准。不过我可以使用 Rich Faces，我们正在研究是否 rich:extendedDataTable 可以在表格实际在后台加载时实现感知的瞬时加载时间。