Primefaces数据表中的"单击时更改行的字体颜色"事件

Question

我想在单击数据表中的特定行后更改字体颜色。我已经用过了onclick="this.style.color='green'；但它不持久。我的代码如下：

<p:dataTable value="#{userOption.menus}" var="mn" id="dt" paginator="true" rows="10">
<p:column>
<h:commandLink action="#{userOption.ret(mn.menuid)}" onclick="this.style.color='green';" update="p1:dt">
#{mn.menuname}
</h:commandLink>
</p:column>
</p:dataTable>

Answer 1

更改颜色onclick的代码很好
这里的主要问题是h:commandLink。

因为每次单击h:commandLink时，它都不会发送Ajax(POST)请求，而是使用GET请求提交整个表单。

因此，从您的代码来看，颜色正在改变，但由于它是h:commandLink，因此整个p:dataTable将被重新渲染，颜色将恢复。

为了解决这个问题，你可以使用Primefacesp:commandLink，它会在你每次点击时发送一个AJAX(POST)请求，这样整个p:dataTable就不会被重新渲染，并且你从onclick应用的风格更改将持续存在。

<p:dataTable value="#{userOption.menus}" var="mn" id="dt" paginator="true" rows="10">
<p:column>
<p:commandLink action="#{userOption.ret(mn.menuid)}" onclick="this.style.color='green';" update="p1:dt">
#{mn.menuname}
</p:commandLink>
</p:column>
</p:dataTable>

Answer 2

我在h:commandLink中遇到了同样的问题，并提出了一个onclick方法，它的工作一致。

<h:commandLink value="#{files.fileName}" onclick="changeLink(this);" id="fetchPdf" action="#{bean.fetchPdf}" target="_blank"/>
<script>
function changeLink(el){
el.style.color = 'purple';
}
</script>