Question

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

我希望用户能够单击内部表中的任何位置，然后浏览器才能显示新页面，例如。 details.jsf？ID = 123

我为页面底部列表中的每个项目创建了一个表单，该表单不可见，我使用JQuery向所有表行添加单击侦听器。处理程序递归DOM树，直到它在外部表中找到表行，其中包含一个id，该id是该行中item的唯一名称。然后我调用一个函数，它使用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”的表单，并提交它。

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

Answer 1

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

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

Richfaces，Icefaces等提供了类似的数据表组件。使工作变得更容易。

Primefaces基本上也在背景中使用JQuery themeroller。

Answer 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>

JSF2点击表格行 - ＆gt;显示新页面

2 个答案: