2

UIにJSF + Primefacesを使用しているWebアプリケーションがあります。データテーブルのrowSelectイベントでのAJAX呼び出しなどのAJAX呼び出しを使用する場合、特にWebページにダーティチェックを適用するのが難しいことに直面しています。

以下は、AJAX 呼び出しでダーティ チェックを適用する正確なシナリオです。以下は、私の Web ページで使用しているコンポーネントです。

1)「companyBean」という名前の Bean によって入力される 1 つの dataTable があります (会社の属性を持つ)

<p:dataTable id="basic" var="company" value="#{companyInfoBean.companyList}" 
    rowKey="#{company.id}"
    selection="#{companyInfoBean.selectedCompany}" selectionMode="single">

    <p:ajax event="rowSelect" update=":customerDataForm:customerDataFields" />

    <p:column id="modelHeader">
        <f:facet name="header">
            <h:outputText value="Company Name" />
        </f:facet>
        <h:outputText value="#{company.companyName}" />
    </p:column>
      more columns....
</p:dataTable>

上記のように、選択した行(AJAX 呼び出し)で、ページの下部にあるフォームの値を更新します。

<h:form id="customerDataForm">
<p:panel id="customerDataFields">
<p:panelGrid >
<p:row>
    <p:column>
        <h:outputLabel for="companyname" value="Company Name " />
    </p:column>
    <p:column>
        <p:inputText id="companyname" value="#{companyInfoBean.selectedCompany.companyName}" label="Company Name" />
    </p:column>
         more columns...
  <p:row>
    <p:column colspan="2" style="text-align:right">
        <p:commandButton value="Save" actionListener="#{companyInfoBean.updateCompany}" 
        update=":customerDataForm:customerDataTable"/>
    </p:column>
    <p:column colspan="2" style="text-align:left">
        <p:commandButton value="Undo" />
    </p:column>
</p:row>

上記のフォームでは、ユーザーはデータテーブルのrowSelectで更新された値を編集できます。

ここで、データテーブルのrowSelectionのフォームのダーティチェックが必要です。つまり、rowSelectのAJAX呼び出しの実行にもかかわらず、ユーザーが使用したフォームに保存されていない変更がある場合にプロンプ​​トが表示されます..

基本的に、このシナリオから理解できること..簡単ではなく、条件付きベースのAJAX呼び出しが必要です。または、いくつかの jQuery を使用してダーティ チェックを実装する必要があります。

4

1 に答える 1

1

これを実装するにはさまざまな方法があります。ここにいくつかあります（ポップアップが問題ない場合は方法3をお勧めします）：

方法 1:

a) selectedCompany のコピーを使用します。たとえば、editCompanyBean を customerDataFields のバッキング Bean として使用します。
b) ajax イベントに「リスナー」を追加します。これにより、selectedCompany の値でこれを設定する前に、editCompanyBean の null 値を確認できます。これが失敗した場合は、メッセージをうなり、コピーをブロックできます。注: オーバーライド スイッチを使用してオーバーライドできます (b)
c) editCompanyBean の保存時に、フィールドの null 値に初期化します。

方法 2:

a) selectedCompany の set ステートメントで、Bean にすでに値が入力されているかどうかを確認します。値が設定されている場合は警告メッセージをスローし、編集をスキップします。
b) 続行する前に、ユーザーに customerDataFields の保存またはリセットをクリックしてもらいます。
注: customerDataFields を保存またはリセットするたびに、selectedCompany をクリアします。

方法 3:

a) customerDataFields をモーダル ポップアップ ダイアログに配置します。ユーザーが続行する前に保存またはリセットする必要があるように設定します。
b) ajax イベントは、上記のモーダル ダイアログをポップアップします。ボタンを使用してポップアップすることもできます。

于 2012-09-19T20:01:28.213 に答える