gpt4 book ai didi

jsf - PrimeFaces DataTable - 需要根据行选择启用/禁用组件

转载 作者:行者123 更新时间:2023-12-04 14:39:16 26 4
gpt4 key购买 nike

我正在使用 PrimeFaces DataTable 来显示记录(在沙盒应用程序中随机生成)。我正在使用复选框选择版本。基本的 DataTable 工作得很好,包括删除和取消按钮(只有在确认对话框中才能真正使用该功能)。我正在尝试向 DataTable 添加功能,以便在选中复选框时,页面上的其他控件将根据选择启用或禁用。

换句话说,如果没有选择任何行(没有选中复选框)某些按钮和/或菜单项将被禁用或不呈现。通过单击复选框选择一行或多行应启用或呈现控件。我曾尝试使用内置的 JavaScript 事件处理程序,但我无法完成这项工作。

现在我的页面显示一个 DataTable 5 列:一个复选框选择列,名字,姓氏,年龄。我使用简单的 bool 复选框在我的另一个沙箱中做了类似的工作,并使用 onclick 事件更新 bool 值。不幸的是,这个 DataTable 中似乎没有任何类似的东西 - 或者如果有的话我不知道如何实现它。

我的索引页:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets">

<body>

<ui:composition template="./newTemplate.xhtml">


<ui:define name="content">
<h:form>

<p:dataTable rowSelectListener="#{tableBean.onRowSelect}" var="data" value="#{tableBean.data}" paginator="true" rows="10"
selection="#{tableBean.selectedNames}">

<f:facet name="header">
Customer List
</f:facet>


<p:column selectionMode="multiple" />

<p:column headerText="Cust ID">
<h:outputText value="#{data.id}" />
</p:column>

<p:column headerText="First Name">
<h:outputText value="#{data.firstName}" />
</p:column>

<p:column headerText="Last Name">
<h:outputText value="#{data.lastName}" />
</p:column>

<p:column headerText="Age">
<h:outputText value="#{data.age}" />
</p:column>

<f:facet name="footer">
<p:commandButton update="deleteList" value="Delete" oncomplete="deleteDlg.show()" />
</f:facet>

</p:dataTable>

<p:dialog header="Delete Selected Records" modal="true" widgetVar="deleteDlg"
>

<h:outputText value="You are about to permanently delete records." /><br /><br />
<h:outputText value="Are you sure you want to continue?" /><br /><br/>

<h:commandButton value="CANCEL" action="#{tableBean.cancelDelete()}" /> <h:commandButton value="Delete" action="#{tableBean.deleteNames()}" />
</p:dialog>

</h:form>
</ui:define>

</ui:composition>

</body>
</html>

我的支持 bean 中可能相关的代码:
    public void deleteNames()
{
for(Data person : selectedNames)
{
data.remove(person);
}
}

public void cancelDelete()
{
for(Data name : selectedNames)
selectedNames = null;
}

public void onRowSelect(SelectEvent event)
{
if(selectedNames == null || selectedNames.length < 1)
setDisable(true);
else
setDisable(false);
}

public boolean isDisable() {
if(selectedNames == null || selectedNames.length < 1)
disable = true;
else
disable = false;
return disable;
}

public void setDisable(boolean disable) {
this.disable = disable;
}

最佳答案

确实有一种解决方法,至少对我有用。

  • 从 primefacess 中提取 datatable.js
  • 修改datatable.js selectRowWithRadio,selectRowWithRadio函数如下

    PrimeFaces.widget.DataTable.prototype.selectRowWithCheckbox = function(element) {
    ...
    ...
    //保存状态
    this.writeSelections();

    //添加以添加即时行选择
    this.fireRowSelectEvent(rowId);
    //结尾
    }


  • 将下面的 javascript 附加到数据表组件的末尾

    ...

  • 26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com