javascript 选择表行时启用 JSF Primefaces 设置按钮

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17137370/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 07:13:23  来源:igfitidea点击:

JSF Primefaces set button enabled when table row is selected

javascriptjsfprimefaces

提问by Oleksandr H

I have a list of users in a table and with disabled Delete button. I need to enable the Delete button when I select the row in the table. How can I do this?

我有一个表中的用户列表,并禁用了删除按钮。当我选择表中的行时,我需要启用“删除”按钮。我怎样才能做到这一点?

<p:dataTable value="#{userBean.patients}" var="item"
            selectionMode="single" rowKey="#{item.id}"
            selection="#{userBean.selected}"
onRowSelected="deleteButton.disabled='false';"> // HOW TO WRITE THIS EVENT CORRECTLY?????
// columns
</p:dataTable>
//This button must be enable after I click on any table row
<p:commandButton id="deleteButton" value="Delete" disabled="true" />

Maybe, I need to use onRowClick event. I dont know the name of this event

也许,我需要使用 onRowClick 事件。我不知道这个活动的名字

回答by Oleksandr H

Thanks for jsfviky71 ! I write:

感谢 jsfviky71 !我写的:

<h:form id="form">
<p:dataTable value="#{bean.patients}" var="item"
            selectionMode="single" rowKey="#{item.id}"
            selection="#{bean.selected}" >
     <p:ajax event="rowSelect" update=":form:deleteButton" listener="#{bean.onRowSelect}" />
 // data in rows
</p:dataTable>

<p:commandButton id="deleteButton" value="Delete" disabled="#{bean.disabled}"/>

And in my bean:

在我的豆子中:

private Boolean disabled = true;

// getter and setter

public void onRowSelect(SelectEvent event) {
    disabled = false;
}

Hope this will help to others

希望这会对其他人有所帮助

回答by jsfviky

One solution could be using

一种解决方案可能是使用

<p:ajax event="rowSelect" update=":deleteButton" listener="#{bean.someListener}" />

<p:ajax event="rowSelect" update=":deleteButton" listener="#{bean.someListener}" />

inside datatable.

数据表里面。

This catches the row selection event, calls a listener and updates the button.

这会捕获行选择事件,调用侦听器并更新按钮。

Now you could define the listener in the backing bean that just updates the value of a boolean instance variable, that reflects the disabled/enabled status of the button in the view:

现在,您可以在支持 bean 中定义监听器,该监听器仅更新布尔实例变量的值,反映视图中按钮的禁用/启用状态:

<p:commandButton id="deleteButton" value="Delete" disabled="#{bean.selectedBoolean}" />

<p:commandButton id="deleteButton" value="Delete" disabled="#{bean.selectedBoolean}" />

You can take a look at primefaces showcase for a similar scenario:

您可以查看类似场景的 primefaces 展示:

http://www.primefaces.org/showcase/ui/datatableRowSelectionInstant.jsf

http://www.primefaces.org/showcase/ui/datatableRowSelectionInstant.jsf

Hope this helps.

希望这可以帮助。