개시하다

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초 정도 걸렸지만 크롬은 문제가 없는 속도였다.
활동 등 불필요한 통제 때문에 지각할 수도 있다.BeginEdit/EndEdit와 같은 불필요한 제어 기능을 중지하지 않은 것 같습니다.

고속화

조사 결과 populate FromArry는 고속화할 수 있다는 것이 밝혀졌다.

// 全選択／全削除チェック処理
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);

행 삭제 버튼 설치

순환 처리에서 줄을 삭제할 때, 아래에서 위로 진행하는 것은 철칙이다.
모든 줄을 잃어버린 후 한 줄과 모든 선택 검사를 추가합니다.
※ 원래 실장 확인 정보와 완료 정보였는데, 이번엔 생략

// 行削除ボタン処理
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: '行を削除' }
    }
}