如何使用JavaScript在p：treeTable上触发行编辑器

Question

我有一个editable p:treeTable：

<p:treeTable ...
             editable="true">
  <p:column headerText="Name">
    <p:cellEditor>
      ...
    </p:cellEditor>
  </p:column>
  <p:column style="width:32px">
    <p:rowEditor />
  </p:column>
</p:treeTable>

我不喜欢我必须单击铅笔图标来触发行编辑器的事实。我尝试通过在浏览器的JavaScript控制台的第一行选择第一个铅笔的锚来触发编辑器：

document.querySelectorAll(".ui-row-editor-pencil")[0].click();

这不起作用。还有其他方法可以使用JavaScript触发行编辑器吗？

Answer 1

显然你不需要选择并点击铅笔的锚点，但锚点内的span，所以：

document.querySelectorAll(".ui-row-editor-pencil span")[0].click();

我添加了一个hack来触发基于行键的行编辑，通过在styleClass的p:rowEditor属性中添加行键：

<p:treeTable nodeVar="node" ...>
  ...
  <p:column style="width:32px">
    <p:rowEditor styleClass="rowKey-#{node.rowKey}"/>
  </p:column>
</p:treeTable>

这允许您通过ID轻松触发编辑：

document.querySelector(".rowKey-"+ rowKey +" .ui-row-editor-pencil span").click();

也可以看看：

• Trigger/activate the RowEditor from bean for a primefaces In-Cell editing enabled p:dataTable