igGrid 複数行選択有効時、行のクリックでその行の選択／非選択を切り替えたい

igGridで複数行選択を有効にし、行のクリックでその行の選択／非選択を切り替えたい場合は、

• igGridRowSelectorsのcheckBoxStateChangingイベント
• igGridRowSelectorsのrowSelectorClickedイベント
• igGridSelectionのrowSelectionChangingイベント
• igGridのcellClickイベント

の各イベントハンドラーで、

• 行セレクターのチェックボックスがクリックされた場合は、igGridに処理を任せる。
• セルがクリックされた場合は、
  • 選択済みの行にクリックされた行が入っている場合は選択を解除し、
  • 選択済みの行にクリックされた行が入っていない場合は選択する。

という処理を実装してください。

実際はイベントの発生順や各イベントで取得できる情報の違いから、先行して発生するイベントハンドラー内でどの操作が発生したか変数に保持しておき、後から発生するイベントでつじつまを合わせていく必要があります。

// 行セレクターのチェックボックスがクリックされたことを示す変数
var isFiredFromCheckbox;

// コードによる選択の切り替わりが発生したかどうかを示す変数
var isSelectionOccured;

$("#grid1").igGrid({
    // ....
    features : [
        {
            name : "RowSelectors",
            enableCheckBoxes: true,
            enableRowNumbering: false,

            checkBoxStateChanging: function (evt, ui) {
                // 行セレクターのチェックボックスがクリックされたことを示す変数の値を更新する。
                isFiredFromCheckbox = true;
            },  // End of checkBoxStateChanging

            rowSelectorClicked: function(evt, ui){
                // コードによる選択の切り替わりが発生した場合
                if(isSelectionOccured){
                    // コードによる選択の切り替わりが発生したことを示す変数を初期化
                    isSelectionOccured = false;
                }
                // コードによる選択の切り替わりが発生しなかった場合
                // つまり、1行だけ選択されていてその行がクリックされた場合
                else{
                    // rowSelectorClickedイベントが発生した行の選択を解除する。
                    $(ui.grid.element[0]).igGridSelection("deselectRowById", ui.rowKey);
                }
            },  // End of rowSelectorClicked
        },
        {
            name: "Selection",
            mode: "row",
            multipleSelection: true,

            rowSelectionChanging: function(evt, ui){
                // 行セレクターのチェックボックスがクリックされている場合
                if (isFiredFromCheckbox){
                    // 特にコードでは何もしない。
                    // 行セレクターのチェックボックスがクリックされた状態を示す変数を初期化する。
                    isFiredFromCheckbox = false;
                }
                // 行セレクターのチェックボックスがクリックされなかった場合
                else{
                    // 選択されている行を取得する。
                    var selectedRows = ui.owner.selectedRows();

                    // 選択されている行の中にrowSelectionChangingイベントが発生した行があるかどうか検索する。
                    var found = false;
                    for(var i = 0; i < selectedRows.length; i++){
                        if (selectedRows[i].id == ui.row.id){
                            found = true;
                            break;
                        }
                    }

                    // 選択されている行の中にrowSelectionChangingイベントが発生した行があった場合
                    if(found){
                        // rowSelectionChangingイベントが発生した行の選択を解除する
                        ui.owner.deselectRowById(ui.row.id);
                    }
                    // 選択されている行の中にrowSelectionChangingイベントが発生した行がなかった場合
                    else{
                        // rowSelectionChangingイベントが発生した行を選択する。
                        ui.owner.selectRowById(ui.row.id);
                    }

                    // コードによる選択が発生したことを示す変数を更新する。
                    isSelectionOccured = true;

                    // イベントをキャンセルし、デフォルトの動作が作動しないようにする。
                    return false;
                }
            },  // End of rowSelectionChanging
        }
    ],

    cellClick: function(evt,ui){
        // コードによる選択の切り替わりが発生した場合
        if(isSelectionOccured){
            // コードによる選択が発生したことを示す変数を初期化する。
            isSelectionOccured = false;
        }
        // コードによる選択の切り替わりが発生しなかった場合
        // つまり、1行だけ選択されていてその行がクリックされた場合
        else{
            // cellClickが発生した行の選択を解除する
            $(ui.owner.element[0]).igGridSelection("deselectRowById", ui.rowKey);
        }
    }
});

なお、この方法は2020年5月28日現在の各イベントの発生順に依存した実装になります。イベントの発生順はバージョンアップによって変更される場合がありますので、バージョンアップの際は十分な動作確認テストを行ってください。

APIリファレンス

• igGrid
  • イベント
    • cellClickイベント
• igGridRowSelectors
  • イベント
    • checkBoxStateChangingイベント
    • rowSelectorClickedイベント
• igGridSelection
  • メソッド
    • deselectRowByIdメソッド
    • selectedRowsメソッド
    • selectRowByIdメソッド
  • イベント
    • rowSelectionChangingイベント