【Handsontable】全選択/全解除チェックと行削除

【Handsontable】全選択/全解除チェックと行削除:

はじめに

これは、Handsontable Advent Calendar 2018の8日目の記事となります。

前回「【Handsontable】データの読み込みと行追加」ではデータの読み取りと行追加を行いました、今回は全選択/全解除チェックと行削除を実装していきます。

全選択/全解除チェック

画面上部に全選択/全解除チェックボックスがあり、全行の先頭列チェックボックスを全選択/全解除チェックボックスの値を同じにします。

// 全選択／全削除チェック処理 
function allCheck(checkbox) { 
    for (var i = 0; i < hot.countRows() ; i++) { 
        hot.setDataAtCell(i, 0, checkbox.checked) 
    } 
} 

素直にこのように書いたところ、IE11では40件データで15秒程かかったが、Chromeでは問題ない速度であった。

たぶんイベントなど余分な制御が入るために遅くなると思われる。BeginEdit/EndEditのような余分な制御を停止する機能はないようである。

高速化

調査した結果、populateFromArrayで高速化できることが分かった。

// 全選択／全削除チェック処理 
function allCheck(checkbox) { 
    var col = hot.propToCol(COL_SELECTConst.Select); 
    hot.populateFromArray(0, col, [[checkbox.checked]], hot.countRows() - 1, col, null, null, 'down'); 
} 

行削除

対象行を指定する。

hot.alter('remove_row', row); 

行削除ボタンの実装

ループ処理で行を削除する場合は、下から上に向かって行うのが鉄則です。

全行無くなったら1行追加するのと、全選択チェックを解除しています。

※本来は確認メッセージと完了メッセージを実装するのですが、今回は省略

// 行削除ボタン処理 
function delRow() { 
    // 画面反映 
    var col = hot.propToCol(COL_SELECT); 
    for (var i = hot.countRows() - 1; i >= 0; i--) 
        if (hot.getDataAtCell(i, col) === true) 
            hot.alter('remove_row', i); 
 
    // 全行無くなったら1行追加 
    if (hot.countRows() === 0) { 
        addRow(); 
    } 
 
    // 全選択/全削除を解除 
    $('#allCheck').prop("checked", false); 
} 

選択位置の行を削除

コンテキストメニューには「行を削除:Remove Row」がデフォルトで用意されている。

contextMenu: { 
    items: { 
        remove_row: { name: '行を削除' } 
    } 
}