p:dataTable 和 p:cellEditor 选项卡行为答案

【问题标题】：p:dataTable with p:cellEditor tab behaviourp:dataTable 和 p:cellEditor 选项卡行为
【发布时间】：2017-06-20 15:49:02
【问题描述】：

我有以下数据表结构：

<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 -> row1_column2 -> row2_column1 -> row2_column2 -> ....

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

我使用的是 Primefaces 6.0 版

【问题讨论】：

我认为这个问题的真正答案是github.com/primefaces/primefaces/issues/1745（尚未解决），但这对您来说不是解决方案，而是一种解释。对我来说，一个解决方案是复杂的（相对）创建，我不想创建这个作为答案......（请发布版本信息）

标签： jsf primefaces datatable tablecelleditor

【解决方案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);
        }
    });
}

确保这个 JS 文件是在 PrimeFaces 自己的 JS 之后加载的。最好的地方如下所示：

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

另见：

【讨论】：