Question

有没有办法在表行选择的基础上动态启用/禁用commandButton？

在下一个示例中，我只想在选择了任何行时启用“ 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="???" />

由于

Answer 1

每次选择或取消选择活动时，都应更新按钮发生。

您应该在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}" />

BTW不要忘记将fn名称空间添加到facelets文件中。

Answer 2

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

<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（列标题中的那个）的复选框，rowSelectCheckbox和rowUnselectCheckbox处理行中的复选框。

Answer 3

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

我正在使用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）。

此外，我还定义了已废弃的属性#{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();
        }
    }
}

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

Answer 4

[解决]

在管理bean中，我改为：

列出departmentList;

到

部门[] departmentList;

然后我可以使用：

<p:ajax event="rowSelectCheckbox" listener="#{departmentCtrl.departmentSelected}"
                         update=":formManageDepartment:departmentBtnPanel,:formManageDepartment:deleteDepartmentBtn"/>
                    <p:ajax event="rowUnselectCheckbox" listener="#{departmentCtrl.departmentUnselected}"
                         update=":formManageDepartment:departmentBtnPanel,:formManageDepartment:deleteDepartmentBtn"/>

在Primefaces表行选择的基础上动态启用/禁用commandButton

4 个答案: