javascript - PrimeFaces p :focus on p:dataTable Element

Question

我目前正在尝试设置一个可编辑的数据表，当用户使用 JavaScript 或支持 bean 编辑单元格时，该表使用 ajax 来保持焦点，因为当发生单元格编辑时，表的其他部分中的数据将需要被更改。更新，因此应该重新绘制表格，使焦点元素失去焦点。目前我正在尝试使用 p:focus 来执行此操作，并使用 CellEditEvent 监听器来获取组件 id。不幸的是，分配给焦点组件 id 的变量并不会改变页面上焦点的元素。

以下是相关的 HTML:

<h:form id="addForm">
    <p:focus id="focusID" for="#{beanView.focus}" />
    <h:panelGroup id="entrypg">
        <p:commandButton id="updateButton" widgetVar="updateButton" update="addForm:myDT" />                         
        <p:dataTable id="myDT" widgetVar="myDT" var="iter" value="#{beanView.valList}" 
                editable="true" editMode="cell">
            <p:ajax event="cellEdit" listener="#{beanView.onCellEdit}" oncomplete="$('#addForm\\\:updateButton').click();"/>
            <p:column headerText="X">
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText value="#{iter.x}" />
                    </f:facet>
                    <f:facet name="input">
                        <p:inputText value="#{iter.x}" />
                    </f:facet>
                </p:cellEditor>
            </p:column>
        </p:dataTable>
    </h:panelGroup>
</h:form>

以及 View 中的单元格编辑处理程序:

public void onCellEdit(CellEditEvent edit) {    
    if(edit.getNewValue() != null) {
        focus = edit.getColumn().getChildren().get(0).getClientId();
    }
}

我也愿意接受更好的方法来做到这一点，因为我不确定 p:focus 是否是为此目的而设计的。

谢谢!

Answer 1

好的，我已经使用小部件让它工作了:

function forceFocus(index) {
    var widget = PF('myDT');
    widget.showCellEditor($('[role="gridcell"].ui-editable-column:eq(' + index + ')'));
}

showCellEditor 几乎完全满足了我的需要，它突出显示一个单元格并将其聚焦以允许立即编辑。它似乎还保留了 ajax 调用之间的焦点。

如果您想对具有超过 1 个可编辑列的表执行此操作，则需要更多逻辑。

编辑:好吧，它似乎没有在表格重绘之间存储焦点，但应该可以在表格重绘之前获取焦点，并使用上述函数在重绘后恢复焦点