0

次の単純な PrimeFaces データテーブルがあります。

<p:dataTable id="list"
             value="#{collisionManager.nodeCollisions}"
             var="cln"
             selection="#{collisionManager.selectedCollisionsArray}"
             rowKey="#{cln.id}"
             rowIndexVar="rowIndex">

    <p:ajax event="rowSelectCheckbox" process="@this" update="@this" />
    <p:ajax event="rowUnselectCheckbox" process="@this" update="@this" />

    <p:ajax event="rowToggle" global="false" />

    <p:column styleClass="row-toggler">
        <p:rowToggler />
    </p:column>

    <p:column selectionMode="multiple" />

    ...

    <p:rowExpansion>
        <h:panelGrid columns="3">
            ... some info about the row
        </h:panelGrid>
    </p:rowExpansion>

</p:dataTable>

ご覧のとおり、テーブルには<p:rowToggler>列と複数選択チェックボックス<p:column selectionMode="multiple" />の列があります。ここに写真があります：

ここに画像の説明を入力

ただし、チェックボックス選択の PF 実装は、チェックボックスをクリックした後にテーブル全体を更新するように見えます。これにより、現在展開されているすべての行展開が再び折りたたまれます。

これを解決するため (および「CantReplicate」バグhttp://code.google.com/p/primefaces/issues/detail?id=3794により、すべてのチェックボックスを選択解除できるようにするため)、複数選択ボックスを実装することにしました。私たち自身。

    <p:column selectionMode="multiple" />

その後、次のようになりました。

    <p:column>
        <p:selectBooleanCheckbox value="#{collisionManager.checkedStates[rowIndex]}">
            <p:ajax process="@this"
                    update="@this"
                    listener="#{collisionManager.processCheck}" />
        </p:selectBooleanCheckbox>
    </p:column>

これは基本的に意図したとおりに機能します (Bean 内のブール値の「チェック済み」状態のリストを介して)。ただし、現在選択されている行は強調表示されません。

チェックアクションの後にデータテーブル全体を更新する場合

            <p:ajax ...
                    update=":collision-form:list"
                    ... >

追加すると、ブール値の状態に従って、それぞれの行が正しく強調表示されます

<p:dataTable id="list"
             ...
             rowStyleClass="#{collisionManager.checkedStates[rowIndex] ? 'ui-state-highlight' : ''}">

ただし、現在展開されているすべての行の展開の効果は、チェック アクションの後に保持されます。そのため、(行トグルが最初の展開/折りたたみ状態を設定できないため) 折りたたまれている行を回避するには、リスト全体を更新する方法はないようです。

次に、jQuery を使用してハイライトを行にパッチするというアイデアを思いつきました。への簡単な呼び出しを追加しましたoncomplete="collisionTable.selectRow(#{rowIndex});":

<p:column>
    <p:selectBooleanCheckbox value="#{collisionManager.checkedStates[rowIndex]}">
        <p:ajax process="@this"
                update="@this"
                listener="#{collisionManager.processCheck}"
                oncomplete="collisionTable.selectRow(#{rowIndex});" />
    </p:selectBooleanCheckbox>
</p:column>

これは基本的にそれぞれの行を強調表示しますが、DOM が更新された後のどこかで への呼び出しcollisionTable.selectRow(#{rowIndex});が何らかの JS エラーで失敗します:

a は定義されていません

Firebug さんのコメント：

「デバッガーを再開しています: デバッグ ループ中にエラーが発生しました: TypeError: firstViewRangeElement が null です」

a は定義されていません

ライン1

FF エラー コンソールには次のように表示されます。

TypeError: a は未定義です

htps://localhost:8181/blablabla/javax.faces.resource/primefaces.js.xhtml?ln=primefaces

ライン1

PrimeFaces={escapeClientId:function(a){return"#"+a.replace(/:/g,"\:")},....... [非常に長い最小化されたコード行]

このエラーにより JS/AJAX エンジンが停止するため、最初のチェック アクションを超えると UI 全体がハングアップします。

Q :

この非常に単純な選択呼び出しが失敗するのはなぜですか? 何がうまくいかないのですか？

Q2 :

これをどのようにデバッグしますか？

編集:別のJSファイルで関数を呼び出すためにoncompleteも試しました。これにより、Firebug にブレークポイントを設定できますが、それ以上のことはできません。ステップスルーするときに気付いた唯一のことは、チェックアクションの後の状態ではなく、前の状態がそのメソッドに渡され、ハイライトが処理された後にselectRow全体が失敗することです。現在のコード:

oncomplete="processChecked( #{collisionManager.checkedStates[rowIndex]}, #{rowIndex} );"

select-row.js ファイル:

function processChecked( checkedState, rowIndex )
{
    alert( "Checked state = " + checkedState + ", index = " + rowIndex );

    if ( !checkedState )
    {
        collisionTable.selectRow( rowIndex, true );
    }
    else
    {
        collisionTable.unselectRow( rowIndex, true );
    }
}

条件が逆になっていることに注意してください。古い状態が渡された理由を誰かが知っている場合は、私に教えてください。

4

0 に答える 0