JSF2 点击表格行 -> 显示新页面答案

【问题标题】：JSF2 Click on table row -> show new pageJSF2 点击表格行 -> 显示新页面
【发布时间】：2012-03-04 21:35:23
【问题描述】：

我正在使用 JSF2，并且我有一个表，其中包含列表中每个项目的一行。该项目的详细信息非常复杂，并显示在每一行的内表中。

我希望用户能够单击内部表格中的任何位置，并让浏览器显示新页面，例如。 details.jsf?id=123

我已经为页面底部列表中的每个项目创建了一个表单，该表单不可见，并且我使用 JQuery 为所有表行添加了点击侦听器。处理程序向上递归 DOM 树，直到它在外部表中找到表行，其中包含一个 id，该 id 是该行中项目的唯一名称。然后我调用一个函数，它使用 JQuery 来定位相关的表单，并提交它。

例如：

  table
      tr id='1'
          first inner table...
      /tr
      tr id='2'
          second inner table...
      /tr
  /table

  form id='item1' action='details.jsf?id=1'
  form id='item2' action='details.jsf?id=2'

因此，单击第二个内表会导致调用一个处理程序，该处理程序会向上递归 DOM，直到找到 id 2，然后它会查找 id 为“item2”的表单，并提交它。

这一切都相当复杂。有没有更简单的方法？

【问题讨论】：

标签： jquery jsf-2

【解决方案1】：

当您使用 Jsf2 时，我相信有更简单的方法可以做到这一点。例如，您可以使用其中一个组件库，例如 primefaces 看看这个。

http://www.primefaces.org/showcase/ui/datatableHome.jsf

Richfaces、Icefaces 等中提供了类似的数据表组件。使工作更轻松。

Primefaces 也基本上在后台使用 JQuery 主题滚轮。

【讨论】：

【解决方案2】：

您的解决方案相当复杂。

首先，在我看来，你应该摆脱所有这些形式。根据您的解释，您不必发送 POST 请求（表单发送 POST 请求）。在这种情况下，GET 请求就足够了。

现在要做的最后一件事是链接到每个表格行中的项目详细信息。我建议您以标准方式执行此操作，因此在表格行中的某处添加如下内容：

<a href='details.jsf?id=#{item.id}'>#{item.id}</a>

您总是可以用一些很酷的图标替换文本。它的可读性很强。用户将看到使用此图标可以单击（或执行）某些操作。

如果您真的希望能够点击表格行内的任意位置，您可以在每个表格数据中插入适当的 div：

<div onclick='window.location=details.jsf?id=#{item.id}'>//content//</div>

【讨论】：

要求是能够点击行上的任意位置。 div 解决方案效果很好！谢谢。