这是我的问题:
目前,我正在开发使用 JavaEE 的项目.7。我们使用 PrimeFaces 版本5.3作为GUI-Toolkit。
GUI的一部分是p:dataTable
,其中某些条目可在"cell"
模式下编辑。其他不可编辑,但使用可编辑单元格计算。
此外,大多数可编辑单元格都使用p:autoComplete
作为输入面。
用户现在应该能够通过单元格使用不同的交互方式,例如 tabbing ,使用鼠标单击或者在上输入细胞。 在所有这些交互中,需要重新计算需要重新计算的值以及其他一些小部件。
我所指的代码也可以在这里找到: https://github.com/HerrDesSchwachsinns/SO-Table 测试项目使用Glassfish Server 4,初始代码是 [的WebContent /表v1.xhtml]。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Table</title>
</h:head>
<h:body>
<h:outputStylesheet library="css" name="table.css" />
<h:link value="index" outcome="index" />
<h:form id="formId">
<p:remoteCommand name="onCellEdit"
update=":#{p:component('valueTableId')}" />
<p:dataTable id="valueTableId" var="values" value="#{bean.values}"
editable="true" editMode="cell" tabindex="100">
<p:ajax event="cellEdit" listener="#{bean.onCellEdit}"
oncomplete="onCellEdit()"
update="@this, :#{p:component('valueTableId')}" />
<p:column headerText="x" id="xCellId">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{values.x}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{values.x}">
<p:ajax event="change"
update="@this, :#{p:component('valueTableId')}"
oncomplete="onCellEdit()" />
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="y" id="yCellId">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{values.y}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{values.y}">
<p:ajax event="change"
update="@this, :#{p:component('valueTableId')}"
oncomplete="onCellEdit()" />
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Calc" id="calcCellId" styleClass="gray">
<h:outputText value="#{values.calc}" />
</p:column>
</p:dataTable>
</h:form>
</h:body>
</html>
bean.onCellEdit
计算新的钙值
使用enter提交值可以正常工作,就像在窗口小部件外单击鼠标一样。但如果一个人点击内部小部件就会发生奇怪的事情 首先,该值不会更新。再次单击窗口小部件内的单元格会再次触发计算,但不会聚焦单元格。更确切地说,确实如此,但它再次模糊。使用Tab键会产生相同的行为。只有在窗口小部件外单击一次后,行为才会再次正常。
在版本2 [table-v2.xhtml]中,我设法获得了标签并点击了右键,但我不得不牺牲了进入印刷机。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Table</title>
</h:head>
<h:body>
<h:outputStylesheet library="css" name="table.css" />
<h:link value="index" outcome="index" />
<h:form id="formId">
<p:dataTable id="valueTableId" var="values"
value="#{bean.values}" editable="true" editMode="cell">
<p:column headerText="x" id="xCellId">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{values.x}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{values.x}">
<p:ajax event="change" listener="#{bean.onCellEdit}"
update="calcCellOutputId" />
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="y" id="yCellId">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{values.y}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{values.y}">
<p:ajax event="change" listener="#{bean.onCellEdit}"
update="calcCellOutputId" />
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Calc" id="calcCellId" styleClass="gray">
<h:outputText value="#{values.calc}" id="calcCellOutputId" />
</p:column>
</p:dataTable>
</h:form>
</h:body>
</html>
但是这个版本确实使用了p:inputText
而不是p:autoComplete
。
在版本[table-v3.xhtml]和[table-v4.xhtml]中插入它们(v3来自v1,v4来自v2)。
随着那些在游戏中,甚至标签不再正常工作。
....
<f:facet name="input">
<p:autoComplete value="#{values.x}"
completeMethod="#{bean.completeX}" dropdown="true"
forceSelection="true">
<p:ajax event="change" listener="#{bean.onCellEdit}"
update="@this calcCellOutputId" />
</p:autoComplete>
</f:facet>
....
我是 Java Server Faces / PrimeFaces 的新手,所以我可能错过了一些东西。
但我在这个问题上工作了将近一周(间歇性地)并且无法弄清楚如何解决这个问题。
我不能改变整体布局决策意味着细胞编辑是强制性的。
这似乎也是update
问题。
我希望我足够精准。 哦,我忘记了:非常感谢提前。