如何通过jquery或javascript生成panelgrid的点击事件？答案

【问题标题】：How to generate click event of panelgrid through jquery or javascript?如何通过jquery或javascript生成panelgrid的点击事件？
【发布时间】：2012-12-12 13:02:05
【问题描述】：

我正在使用 JSF 2.0 和 primefaces 3.0。我有一个 rowtoggler 和 rowexpansion。由于我使用的是 primefaces 旧版本，所以我没有 rowToggle 事件。而且我需要在行扩展时通过ajax在服务器端调用一个方法。所以我在 rowtoggler 周围放置了 div 标签并调用了一个 javascript 函数。现在我想通过在 rowexpansion 内的 panelgrid 的 click 事件启动 ajax 调用。如果发生这种情况，那么它看起来就像 3.4 rowToggle 事件。

【问题讨论】：

为什么不升级旧版本而不是升级？
我已经获得了 3.0，并被告知仅将其用于应用程序。

标签： javascript jquery jsf primefaces

【解决方案1】：

您可以在点击行切换器时使用 jQuery 的事件绑定来执行 Javascript。

<h:form id="form">
    <p:dataTable id="dt" value="[1,2]">
        <p:column>
            <p:rowToggler />
        </p:column>
    </p:dataTable>
    <p:remoteCommand name="remotecommand"
        oncomplete="alert('remote command fired')" />
</h:form>
<script type="text/javascript">
$("[id='form:dt'] .ui-row-toggler").on("click", function() { remotecommand(); });
</script>

Javascript 说明：

$("[id='form:dt'] .ui-row-toggler") 通过 id (form:dt) 选择数据表，然后选择具有样式类 ui-row-toggler 的所有后代。

.on("click", function() { remotecommand(); }) 将一个匿名函数绑定到一个 click 事件，该事件触发一个由 p:remoteCommand 声明的 Javascript 函数。

您可以使用p:remoteCommand 来执行带有action 或actionListener 的bean 方法。 ;-)

请注意，我认为这不是一个长期的解决方案。升级到 PrimeFaces 3.4 会是更好的解决方案。

【讨论】：

感谢 siebz0r。我有点困惑。它像ajax一样工作吗？在后台我必须处理什么样的事件？
p:remoteCommand 像 p:commandButton 一样调用支持 bean 中的方法，没有事件处理等。p:remoteCommand 使用 AJAX 提交。
非常感谢您的回复。 :) 我一定会试试这个 :D
它显示的 msg 像.. 父级不是复合组件或 ClientBehaviorHolder 类型，类型是：org.primefaces.component.remotecommand.RemoteCommand@d1918a 我的代码就像... p:remoteCommand>
@KushSahu 删除 <f:ajax> 标签，它不属于那里。改用p:remoteCommand action="#{tableBean.ajaxCallThis}" ;-)

【解决方案2】：

我已将 commandLink 放在 rowtoggler 周围，并通过 commandlink 进行 ajax 调用，我还可以使用 EL2.2 通过它传递值

<p:commandLink action="#{myBean.doSomething(foo)}" >
    <p:rowToggler/>
</p:commandLink>

【讨论】：

【解决方案3】：

我猜你会喜欢

<p:panelGrid>
    <p:ajax event="click" listener="#{bean.onclick}" />
    ...
    the rest of the grid here
    ...
<p:panelGrid>

我还没有测试过，但它适用于其他组件

【讨论】：

我试过这个。但它不是解决方案。我想在不使用 3.4 版本的 Primefaces 的情况下完全像 rowToggle 事件那样做。
如果我可以调用 panelgrid 的 click 事件，那么我认为它与 rowtoggle 事件非常相似。

【解决方案4】：

除了 siebz0r 的解决方案，我还找到了另一种解决方案。

<p:commandLink action="#{bean.abcFunction}"> <p:rowToggler/> </p:commandLink>

它也很有效，也很简单:-)

【讨论】：