Primefaces数据表autoComplete和焦点

时间:2015-11-04 13:39:31

标签: primefaces datatable autocomplete focus jsf-2.2

首先,我要感谢你们在SO上所做的所有工作。我真的很感激。

这是我的问题:

目前,我正在开发使用 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问题。

我希望我足够精准。 哦,我忘记了:非常感谢提前。

stripped down version of the dataTable

0 个答案:

没有答案