我有以下数据表结构:
<p:dataTable editable="true" editMode="cell"..>
<p:column headerText="value_1">
<p:cellEditor>
<f:facet name="output">
<h:outputText ...
</f:facet>
<f:facet name="input">
<p:inputText ....
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="value_2">
<p:cellEditor>
<f:facet name="output">
<h:outputText ...
</f:facet>
<f:facet name="input">
<p:inputText ....
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="action">
<p:commandButton tabindex="-1"...
</p:column>
问题是最后一列破坏了选项卡导航。我可以从第 1 列切换到第 2 列，但无法到达下一行。 当我删除最后一列时，一切都会按预期进行。我想要这样的选项卡行为:
row1_column1 -> row1_column2 -> row2_column1 -> row2_column2 -> ....
我还尝试删除 tabindex="-1" 并在第三列中使用 p:cellEditor，但行为保持不变，我只能使用 Tab在第 1 行。
我错过了什么？
我使用的是 Primefaces 6.0 版
最佳答案
PrimeFaces 数据表单元格编辑器选项卡行为已实现 here :
2243 tabCell: function(cell, forward) {
2244 var targetCell = forward ? cell.next() : cell.prev();
2245 if(targetCell.length == 0) {
2246 var tabRow = forward ? cell.parent().next() : cell.parent().prev();
2247 targetCell = forward ? tabRow.children('td.ui-editable-column:first') : tabRow.children('td.ui-editable-column:last');
2248 }
2249
2250 this.showCellEditor(targetCell);
2251 },
检查第 2244 行。next()和prev()调用不会检查它是否是 .ui-editable-column 。因此，它基本上会盲目地切换到任何列，即使它不包含 <p:cellEditor> .
因此，我们希望准确修复该部分以检查 .ui-editable-column 。将以下代码放入 JS 文件中。
if (PrimeFaces.widget.DataTable) {
PrimeFaces.widget.DataTable = PrimeFaces.widget.DataTable.extend({
tabCell: function(cell, forward) {
var targetCell = forward ? cell.next('td.ui-editable-column') : cell.prev('td.ui-editable-column');
if(targetCell.length == 0) {
var tabRow = forward ? cell.parent().next() : cell.parent().prev();
targetCell = forward ? tabRow.children('td.ui-editable-column:first') : tabRow.children('td.ui-editable-column:last');
}
this.showCellEditor(targetCell);
}
});
}
确保此 JS 文件是在 PrimeFaces 自己的 JS 之后加载的。最佳位置如下所示:
<h:head>
...
</h:head>
<h:body>
<h:outputScript name="primefaces-patches.js" target="head" />
...
</h:body>
另请参阅:
关于jsf - p :dataTable with p:cellEditor tab behaviour，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42021438/