1

由于任何 JSF 页面都在服务器端转换为等效的 HTML 并发送到客户端进行渲染，而客户端的 JQuery 获取 HTML 并重新呈现它。

从理论上讲，应该可以将 JSF 生成的 HTML 包装到 JQuery 中，如果是这样，我想知道它是如何完成的。如果可能，特别使用 RichFaces 作为 JSF 实现。

<rich:dataTable id="table">          
  <rich:column>

  </rich:column>
</rich:dataTable>

上面的 JSF 片段被转换成它的等效 HTML 就是这样

<table id="table">
  <tr>
    <td></td>
  </tr>
</table>

难道不应该做这样的事情吗

<script type="text/javascript">
   $(document).ready(function () {
     $('#table').dataTable();
}
</script>

我已经尝试过了，但它似乎不起作用。

因此，如果有人有任何提示，我将不胜感激。

4

3 回答 3

3

混合 JSF 和 jquery 是可行的，但有一些问题。

JSF 正在接管你的 id，所以如果 table 是一个 id 为“form”的表单，那么 html 中的实际元素 id 将默认为“form:table”。我认为 jquery 在选择器中的冒号可能有问题，因此您可以用一个类标记您的表并通过该类进行选择：

<rich:dataTable styleClass="my-table">          
  <rich:column>

  </rich:column>
</rich:dataTable>

并将选择器设置为：

<script type="text/javascript">
   $(document).ready(function () {
     $('.my-table').dataTable();
}
</script>
于 2012-05-09T11:53:33.787 回答
2

JSF 组件的 Id 是通过将层次结构中容器的 Id 与 : 分隔符组合起来生成的。不是所有的容器都算数，我不记得确切的规则。

通常一些 JSF 库有一些客户端 API 来获取我不知道的 Richfaces 的组件 ID。

无论如何，如果您想使用基于 jQuery 的 JSF，请查看 primefaces。

希望这可以帮助。

于 2012-05-09T11:52:43.920 回答
1

这个问题可能是由 Prototype.js 组成的 Jquery 和富面孔组件引起的“$”名称间距冲突。尝试使用 jQuery.noconflict() 方法。我有一个类似的问题，使 jquery 与richfaces 一起工作 jquery.noconflict() 成功了..

<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
 // Code that uses jQuery's $ can follow here.
 });
// Code that uses other library's $ can follow here.
</script>

祝你好运！

于 2012-05-15T14:07:49.820 回答