如何使用javaScript函数为添加到数据表的最新行调用rowEditor按钮？
如何使用javaScript函数为添加到数据表的最新行调用rowEditor按钮？
提问于 2018-08-01 17:56:54
<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函数来为我的commandButton添加的最新行单击p:rowEditor。这必须同时发生在创建行时，它必须处于编辑模式。谢谢。
回答 1
Stack Overflow用户
发布于 2018-08-01 19:50:35
答案是肯定的。转到此处的展示页面，然后按F12键打开JavaScript控制台。
https://www.primefaces.org/showcase/ui/data/datatable/addRow.xhtml
如果检查Edit row图标所在的最后一行的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">因此，要获取表中的最后一行并按下它的Edit按钮，请在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();
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51630395
复制相关文章
相似问题