3

有没有办法在表格行选择的基础上动态启用/禁用命令按钮？

在下一个示例中，我只想在选择任何行时启用“<strong>deleteBtn”：

<p:dataTable
    var="department" value="#{departmentCtrl.departmentTable}"
    selection="#{departmentCtrl.departmentList}">

    <p:column selectionMode="multiple" styleClass="w18" /> 

    <p:column headerText="#{msgs.id}" sortBy="#{department.id}">
        <h:outputText value="#{department.id}" />
    </p:column>

    <p:column headerText="#{msgs.name}" sortBy="#{department.name}">
        <h:outputText value="#{department.name}" />
    </p:column>
</p:dataTable>

<p:commandButton id="deleteBtn" value="#{msgs.delete}" disabled="???" />

谢谢

4

4 回答 4

3
  1. 每次发生选择或取消选择事件时，您都应该更新您的按钮。

  2. departmentList当为空时，您应该禁用它。

    <p:dataTable var="department" 

value="#{departmentCtrl.departmentTable}" 

selection="#{departmentCtrl.departmentList}">

        <p:ajax event="rowSelect" update="deleteBtn"/>
        <p:ajax event="rowUnselect" update="deleteBtn"/>

        <p:column selectionMode="multiple" styleClass="w18" /> 

        <p:column headerText="#{msgs.id}" sortBy="#{department.id}">
            <h:outputText value="#{department.id}" />
        </p:column>

        <p:column headerText="#{msgs.name}" sortBy="#{department.name}">
            <h:outputText value="#{department.name}" />
        </p:column>

</p:dataTable>

    <p:commandButton id="deleteBtn" value="#{msgs.delete}" 
        disabled="#{fn:length(departmentCtrl.departmentList) == 0}" />

顺便说一句，不要忘记将 fn 命名空间添加到您的 facelets 文件中。

于 2012-07-23T19:41:05.043 回答
1

派对可能有点晚了，但这是我根据复选框选择表中每种可能的点击类型启用和禁用的内容。在我的情况下，我只需要告诉打印和删除按钮在没有选择任何内容时禁用。 

<p:ajax event="rowSelect" update=":form:printBtn,:form:deleteBtn" />
<p:ajax event="rowUnselect" update=":form:printBtn,:form:deleteBtn" />
<p:ajax event="toggleSelect" update=":form:printBtn,:form:deleteBtn" /> 
<p:ajax event="rowSelectCheckbox" update=":form:printBtn,:form:deleteBtn" />
<p:ajax event="rowUnselectCheckbox" update=":form:printBtn,:form:deleteBtn" />

您可能实际上并不需要所有五个事件，但我确实需要。 rowSelect并rowUnselect处理不在复选框中的鼠标点击。 toggleSelect处理选择 all/none 的复选框（列标题中的那个），rowSelectCheckboxandrowUnselectCheckbox处理行中的复选框。

于 2015-10-27T17:56:01.163 回答
0

我来不及回应。但它可能会帮助某人。当用户没有选择任何复选框时，我有同样的要求来禁用按钮。

我正在使用 Primefaces 5.1

这是我提出的解决方案。

我widgetVar用来检查选定的行数并启用/禁用命令按钮。

从 Primefaces 文档中，我们有数据表的客户端 API：

在此处输入图像描述

我们还有用于命令按钮的客户端 API

在此处输入图像描述

现在我们将回到实现部分

<p:dataTable var="line" varStatus="loop"
                    value="#{myexpense.lazyModel}" paginator="true"
                    rows="#{myexpense.rows}"
                    rendered="#{myexpense.userIdSearch eq null}" 
                    rowIndexVar="row"
                    emptyMessage="#{tk.expense_table_empty}"
                    paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} 
                    {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                    widgetVar="expenseEntryTable"
                    rowsPerPageTemplate="#{myexpense.rowsPerPageTemplate}"
                    id="lazyDataTable" lazy="true"
                    selection="#{myexpense.selectedExpenseEntryList}"
                    rowKey="#{line.oid}">
                    <p:ajax event="toggleSelect" oncomplete="disableOrEnableCommandButton();" update="updateBtn"/> 
                    <p:ajax event="rowSelectCheckbox" oncomplete="disableOrEnableCommandButton();" update="updateBtn"/>
                    <p:ajax event="rowUnselectCheckbox" oncomplete="disableOrEnableCommandButton();" update="updateBtn"/>
                    <p:column selectionMode="multiple" width="3%" styleClass="centerAlignColumn selectAll" id="selectAll"/>
                    .... more column
                    <f:facet name="footer">
                        <p:commandButton process="lazyDataTable" value="#{tk.expense_update_selected}" partialSubmit="true"  ajax="true" widgetVar="updateBtn" disabled="#{myexpense.disableUpdateButton}"
                            actionListener="#{myexpense.updateSelected}" 
                            update="lazyDataTable @form" rendered="#{myexpense.form.myOnly}" />
                    </f:facet>
                </p:dataTable>

如您所见，我定义了 2 个 widgetVar，一个用于数据表 (expenseEntryTable)，另一个用于命令按钮 (updateBtn)。

我还定义了 disbaled 属性#{myexpense.disableUpdateButton}，这在页面加载时会很有帮助。

private Boolean disableUpdateButton;
    public Boolean getDisableUpdateButton(){
            disableUpdateButton = !((selectedExpenseEntryList!=null) && (!selectedExpenseEntryList.isEmpty()));
            return disableUpdateButton;
        }

现在你可以编写java脚本了。

function disableOrEnableCommandButton() {
    if (PrimeFaces.widgets['expenseEntryTable']) {
        if (PF('expenseEntryTable').getSelectedRowsCount() > 0) {
            PF('updateBtn').enable();
        } else {
            PF('updateBtn').disable();
        }
    }
}

希望它可以帮助任何人！！！

于 2016-02-28T10:25:23.997 回答
-2

[解决了]

在管理 bean 中，我从以下位置更改：

列出部门列表；

至

部门[]部门列表；

然后我可以使用：

<p:ajax event="rowSelectCheckbox" listener="#{departmentCtrl.departmentSelected}"
                         update=":formManageDepartment:departmentBtnPanel,:formManageDepartment:deleteDepartmentBtn"/>
                    <p:ajax event="rowUnselectCheckbox" listener="#{departmentCtrl.departmentUnselected}"
                         update=":formManageDepartment:departmentBtnPanel,:formManageDepartment:deleteDepartmentBtn"/>
于 2012-07-24T11:17:51.293 回答