我目前正在尝试设置一个可编辑的数据表,当用户使用 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>
以及视图中的单元格编辑处理程序:
public void onCellEdit(CellEditEvent edit) {
if(edit.getNewValue() != null) {
focus = edit.getColumn().getChildren().get(0).getClientId();
}
}
我也愿意接受更好的方法来做到这一点,因为我不确定 p:focus 是否是为此目的而设计的。
Thanks!
好的,我已经使用小部件让它工作了:
function forceFocus(index) {
var widget = PF('myDT');
widget.showCellEditor($('[role="gridcell"].ui-editable-column:eq(' + index + ')'));
}
showCellEditor 几乎完全满足了我的需要,它突出显示了一个单元格并聚焦它以允许立即编辑。它似乎还保留了 ajax 调用之间的焦点。
如果您想对具有超过 1 个可编辑列的表执行此操作,则需要更多逻辑。
编辑:好吧,它似乎没有在表格重绘之间存储焦点,但应该可以在重绘表格之前抓住焦点,并使用上述函数在重绘后恢复焦点
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)