3

テーブルの行選択に基づいて commandButton を動的に有効/無効にする方法はありますか?

次の例では、行が選択されている場合にのみ「<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}" />

ところで、facelets ファイルに fn 名前空間を追加することを忘れないでください。

于 2012-07-23T19:41:05.043 に答える
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 を定義しました。1 つはデータ テーブル (expenseEntryTable) 用で、もう 1 つはコマンド ボタン (updateBtn) 用です。

#{myexpense.disableUpdateButton}また、ページの読み込み時に役立つdisbaled 属性を定義しました。

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では、次のように変更します。

リストdepartmentList;

に

Department [] 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"/>
于 2012-07-24T11:17:51.293 に答える