javascript - 如何使用 javaScript 函数为添加到我的数据表的最新行调用 rowEditor 按钮？

Question

        <p:commandButton value="Add" icon="ui-icon-plus"
            actionListener="#{institutionView.addInst}" oncomplete="PF('institutionDataTable').addRow()" process="@this"/>
        <p:growl id="message" showDetail="true" />


  <p:dataTable id="instDisplay" var="institutionData" paginator="true"
                rows="15" rowsPerPageTemplate="5,10,15,20,25,30"
                widgetVar="institutionDataTable"
                filteredValue="#{institutionView.institutionData}"
                emptyMessage="No institutions with given criteria"
                value="#{institutionView.institutionData}" selectionMode="single"
                selection="#{institutionView.selectedModel}"
                rowSelectListener="#{institutionView.onRowSelect}"
                onRowSelectUpdate="instDisplay"
                rowKey="#{institutionData.institutionId}" rowIndexVar="rowIndex"
                editable="true">

         <p:ajax event="rowEdit" listener="#{institutionView.onRowEdit}"
                    update="instDisplay" />
         <p:ajax event="rowEditCancel"
                    listener="#{institutionView.onRowCancel}" update="msg" />

         ... columns

       <p:column headerText="Edit" style="width:32px">
          <p:rowEditor />
       </p:column>

    </p:dataTable>

我想调用一个 javascript 函数来单击 p:rowEditor 以获取由我的 commandButton 添加的最新行。这必须在创建行时同时发生，它必须处于编辑模式。谢谢。

Answer 1

答案是肯定的。转到此处的展示页面，然后按 F12 调出 JavaScript 控制台。

https://www.primefaces.org/showcase/ui/data/datatable/addRow.xhtml

如果您检查“编辑行”图标所在的最后一行的 HTML，您将看到此 HTML。

<td role="gridcell" style="width:32px">
    <div id="form:cars1:14:j_idt655" class="ui-row-editor ui-helper-clearfix">
        <a href="#" class="ui-row-editor-pencil">
            <span class="ui-icon ui-icon-pencil"></span>
        </a>
        <a href="#" class="ui-row-editor-check">
            <span class="ui-icon ui-icon-check ui-c"></span>
        </a>
        <a href="#" class="ui-row-editor-close">
            <span class="ui-icon ui-icon-close ui-c"></span>
        </a>
    </div>
</td>

您会注意到在 form:cars1:14:j_idt655 中，14 是最后一行的行号。

现在在 JavaScript 控制台中键入或粘贴此命令并按 ENTER。

$('#form\\:cars1\\:14\\:j_idt655 > .ui-row-editor-pencil').click();

注意它打开最后一行进行编辑？所以现在你只需要在为行号添加它时找出你的新行。每行在 TR 上都有一个 data-ri 元素，就像这样......

<tr data-ri="14" class="ui-widget-content ui-datatable-odd" role="row">

因此，要获取表中的最后一行并按下其编辑按钮，请在 javaScript 控制台中输入以下脚本。

// select the last row number
var row = $("tr[data-ri]").last().attr('data-ri');
// click the edit pencil
$('#form\\:cars1\\:'+row+'\\:j_idt655 > .ui-row-editor-pencil').click();

因此，将您的 oncomplete JS 函数更改为类似于此注释的内容，您必须将您的#form 更新为您的表单名称，将 j_idt655 更新为您正确的组件 ID...

function addRowAndEdit() {
   PF('institutionDataTable').addRow();
   // select the last row number
   var row = $("tr[data-ri]").last().attr('data-ri');
   // click the edit pencil
   $('#form\\:instDisplay\\:'+row+'\\:j_idt655 > .ui-row-editor-pencil').click();
};