6

jquery.datatables プラグインと FixedColumns アドオンを使用していますが、2 つのテーブルの同期を維持する際に問題が発生しています。

テーブルの最初の 2 行にはチェックボックスが含まれています。

データは ajax で読み込まれるため、チェックボックスの JSON で「true」または「false」の値を返し、「true」または「false」fnRowCallbackを動的に作成して適切なチェックボックスに置き換えます。

次に、FixedColumns アドオンを追加しました。テーブルは最初は正しく読み込まれますが、その後の再描画では「true」または「false」の値がチェックボックスに置き換えられません。

まだfnRowCallback起動しますが、テーブルの一部とデータの一部しかありません

Note this code is in TypeScript but resembles JS closely enough to understand without knowing it

 fnRowCallback: (row : DataTables.Settings, data: any[], displayIndex: number, displayIndexFull: number) : void => {

                if($(row).children("td.checkboxColumn").length > 0){


                    var isFlaggedIdentifier = 'isFlaggedCheckbox_' + displayIndexFull;
                    var isFlaggedCheckbox = $('<input />', { type: 'checkbox', id: isFlaggedIdentifier, 'class': 'tableCheckboxInput', value: isFlaggedIdentifier });
                    var isFlaggedLabel = $('<label />', { 'for': isFlaggedIdentifier, 'class': 'tableCheckboxLabel' });
                    var isFlagged: bool = $(row).children("td").eq(1).text() === "TRUE";

                    var flaggedCheckboxEntry = $(row).children("td").eq(1);
                    if(flaggedCheckboxEntry.hasClass("checkboxColumn")){
                        flaggedCheckboxEntry.html(isFlaggedCheckbox);
                        flaggedCheckboxEntry.append(isFlaggedLabel);
                    }
                }
            }

ドキュメントによると、 FixedColumns にはfnRowCallback. 描画したテーブルの後に一度だけ起動するものしかfnDrawCallbackないので、試したことはありませんが、チェックボックスに置き換えられる前に「true」/「false」が点滅するのではないかと心配しています。

この仮定が当てはまる場合、テーブルがレンダリングされる前にチェックボックスを置き換えるにはどうすればよいですか。

4

3 に答える 3

6

この問題については議論があり、最終的に解決されたようです。

ここで注意すべき「トリック」は、FixedColumns が複製された要素であり、元の要素 (DataTable の列の可視性オプションを使用して隠されている) ではないことです。クローンが更新されると、チェック ボックスのノードが削除され、元のノードのときに置き換えられます (これは、DataTable 自体ではなく、FixedColumns を使用することに注意してください)。したがって、問題は、元のノードがチェックされていないことです。行っちゃった…

したがって、これに対処するにはいくつかの方法があります。最初の方法は、クローン内の要素に「変更」イベント ハンドラを用意し、チェックするとオリジナルを更新することです。そのため、クローンを作成すると、正しい状態でクローンが作成されます。もう 1 つのオプションは、同様のイベント ハンドラーを使用し、行全体の選択フラグを使用することです。つまり、TR ノードまたはクラスにパラメーターを追加して、それが選択されていることを示します。固定列。同じ原則に基づいて、おそらく他のオプションもあると思います。

続きを読む:

Datatables フォーラム #1

Datatables フォーラム #2

于 2013-06-18T07:00:28.730 に答える