Question

我有以下数据结构：

<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>

问题是最后一列打破了标签导航。我可以从column1到column2标签，但无法到达下一行。当我删除最后一列时，一切都按预期工作。我想要一个像这样的标签行为：

row1_column1 - ＆gt; row1_column2 - ＆gt; row2_column1 - ＆gt; row2_column2 - ＆gt; ....

我还尝试删除tabindex="-1"并在第三列中使用p:cellEditor，但行为保持不变，我只能在第1行中标记。我错过了什么？

我正在使用Primefaces 6.0版

Answer 1

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);
        }
    });
}

确保在 PrimeFaces拥有JS后加载此JS文件。最佳位置如下所示：

<h:head> ... </h:head> <h:body> <h:outputScript name="primefaces-patches.js" target="head" /> ... </h:body>

另见：

MonkeyPatching: PrimeFaces widgets extend/override

How to reference CSS / JS / image resource in Facelets template?

p：带有p：cellEditor选项卡行为的dataTable

1 个答案:

另见：