3

オンセル編集機能を備えたデータ テーブルがあり、別のスタイル クラスを適用して変更されたレコードを表示するようにデータ テーブルを更新したいと考えています。

ここに私の問題があります:

  • onCellEdit イベントが発生したときにデータ テーブルを更新しないと、レコードは正しく更新されますが、変更された行に適用されたスタイル クラスが表示されません。
  • onCellEdit イベントが発生したときにデータ テーブルを更新し、リターン キーを使用して値を更新すると、すべて正常に動作し、変更された行に適用されたスタイル クラスを確認できます。
  • オンセル編集イベントが発生したときにデータ テーブルを更新し、マウス クリックを使用して値を更新すると (別の行または同じ行内の別のセルをクリック)、最初の値のみが正しく更新されます。他の値を更新しようとすると、新しい値を挿入する前に onCellEdit イベントがトリガーされるため、その後のすべての変更に対して、イベントはnewValue=oldValueでトリガーされます。

xhtml ページ:

<h:form id="frm_tbl_riv">
  <p:dataTable id="tbl_rilevazioni" var="rilevazione"
    value="#{rilevazioni.rilevazioni}" widgetVar="tbl_rilevazioni_id"
    editable="true" editMode="cell" scrollable="true" scrollHeight="350"
    rowKey="#{rilevazione.idRilevazione}" selectionMode="single"
    selection="#{rilevazioni.selezionata}">
    <p:ajax event="rowSelect"
      update=":tView:frm_tbl_riv:popup_rilevazioni" />
    <p:ajax event="cellEdit" listener="#{rilevazioni.onCellEdit}"
      update=":tView:frm_btn_riv" />
      <!-- update=":frm_btn_riv :frm_tbl_riv" -->
    <p:ajax event="contextMenu"
      listener="#{rilevazioni.onRilevazioneSelezionata}"
      update="@this" />

    <p:column headerText="#{msg['rilevazione']}" width="130">
      <f:facet name="header">
        <h:outputText value="#{msg['rilevazione']}" />
      </f:facet>
      <h:outputText value="#{rilevazione.descRilevazione}" id="descRil" />
    </p:column>
    <p:column headerText="#{msg['valore']}"
      styleClass="#{rilevazioni.isModificata(rilevazione) ? 'modificata' : ''}"
      width="30">
      <h:outputText value="#{rilevazione.valore}"
        rendered="#{!rilevazioni.isModificabile(rilevazione)}" />
      <p:cellEditor
        rendered="#{rilevazioni.isModificabile(rilevazione)}">
        <f:facet name="output">
          <h:outputText value="#{rilevazione.valore}" />
        </f:facet>
        <f:facet name="input">
          <p:inputText value="#{rilevazione.valore}"
            label="#{msg['valore']}">
        </f:facet>
      </p:cellEditor>
    </p:column>
  </p:dataTable>
</h:form>

マネージド Bean (ビュー スコープ):

@ManagedBean(name = "rilevazioni")
@ViewScoped
public class GestioneRilevazioniBean implements Serializable
{
  // ...

  public void onCellEdit(CellEditEvent event)
  {
    FacesContext context = FacesContext.getCurrentInstance();
    FacesMessage msg = null;
    Object nuovoValore = event.getNewValue();
    Object vecchioValore = event.getOldValue();
    int i = event.getRowIndex();
    RilevazioneGiornaliera r = rilevazioni.get(i);

    r.setIdUtente(userBean.getUserId());

    if (!nuovoValore.equals(vecchioValore))
    {
      try
      {
        RilevazioniService.getInstance().updateRilevazioneGiornaliera(r);
        modificate.add(r);
      } catch (Throwable ex)
      {
        // ...
      }
    }
  }

  public boolean isModificata(RilevazioneGiornaliera riv)
  {
    return modificate.contains(riv);
  }

  public boolean isModificabile(RilevazioneGiornaliera rilevazione)
  {
    // some logic
    return true;
  }
}

私が使用する場合:

update=":frm_btn_riv :frm_tbl_riv"

セル上の編集イベントについては、ポイント 2 と 3 で指定された動作を取得します。 @formまたは@parentと同じです。

4

1 に答える 1

3

onCellEdit イベントが発生した後、スタイル クラスを変更されたセルに更新するソリューションを確立しました。

データ表:

<p:ajax event="cellEdit" listener="#{rilevazioni.onCellEdit}"
    oncomplete="handleRilevazioniCellEdit(xhr, status, args);" />
// ...
// within the cell editor
<p:inputText id="rilevazioniCellEditInputtext" value="#{rilevazione.valore}"
        label="#{msg['valore']}" />

Javascript:

<script>
function handleRilevazioniCellEdit(xhr, status, args)
{
    var modelInput = $('#parentId:' + args.rowIndex + '\\:rilevazioniCellEditInputtext');
    var cell = modelInput.parent().parent().parent();
    cell.addClass('modificata');
}
</script>

onCellEdit()イベントの最後にあるマネージド Bean :

RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.addCallbackParam("rowIndex", event.getRowIndex());
于 2013-05-29T08:28:03.893 に答える