Primefaces selectOneMenu 焦点不起作用

Question

我在应用程序中使用了PrimeFaces 5.1，我在dataTable内部使用了selectOneMenu，当我按下添加更多按钮需要聚焦selectOneMenu按钮时。

示例代码

JavaScript

function focusMenu(id)
{
var focusId="#{p:component('mainTable')}"+":"+id;
PrimeFaces.focus(final);
}

.xhtml

<div style="padding-left:4px;height: 
expression(this.scrollHeight > 399? '400px' : 'auto');max-height:400px;overflow-x:auto;overflow-y:auto;">  
<p:dataTable id="mainTable" value=#{main.UserDataTable} .....>
<p:column headerText="Drop Down">
<p:selectOneMenu id="dropdDownId"...>
.....
</p:selectOneMenu>
</p:column>
<p:column headerText="Operation">
<p:commandButton value="Add More Row" action="{user.addMoreRowAction}"
update="mainTable"/>
</p:column>
</p:dataTable>
</div>

爪哇岛

public String addMoreRowAction()
{
RequestContext.getCurrentInstance().execute("focusMenu('"+ rowIndex + ":dropdDownId"')");
return null;
}

在这里，上面的代码可以正常工作，可以按照我的预期聚焦最后添加的selectOneMenu，但是浏览器滚动条不会根据聚焦最近添加的selectOneMenu组件而向下移动。

请帮我解决问题。

Answer 1

您可以使用scrollTop函数将滚动条带到焦点 id。 将focusid传递到函数中。

function setScrollPos(focusId){
$('html,body').animate({
scrollTop: $(focusId).offset().top-65
}, 1000);
}

调用上述函数

function focusMenu(id)
{
var focusId="#{p:component('mainTable')}"+":"+id;
PrimeFaces.focus(final);
setScrollPos(focusId); <<------
}