Создаем ToDo list в гугл таблице на основе чекбоксов и скриптов

Создание интерактивного ToDo list в таблицах не такой уж и сложный процесс, как может показаться на первый взгляд. Список будет скрываться и зачеркиваться по мере выполнения задач.

Шаг 1: непосредственно список.

Здесь нужно создать сам список в гугл таблицах. Для примера, у меня получился следующий:

В таком виде это просто ячейки с чекбоксами и текстом.

Шаг 2: скрипт по клику на чекбокс.

В классическом виде, при нажатии на чекбокс строка ниже должна скрываться, а задача — зачеркиваться.

Если зачеркивание задачи реализуется через условное форматирование, то скрытие строчки ниже — через гугл скрипт.

Первое, что нужно — получить все строки, где есть чекбоксы:

const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName('List');

function getAllCheckBoxes() {
  
  const endPosition = ws.getLastRow();
  const allCheckBoxesArr = [];

  for(let i = 1; i <= endPosition; i++){
    if (ws.getRange('A' + i).getValue() === true || ws.getRange('A'+ i).getValue() === false && ws.getRange('A'+ i).getValue() !==''){
      allCheckBoxesArr.push(ws.getRange('A' + i).getRowIndex());
    }
  }  
  return allCheckBoxesArr;
}

const endPosition = ws.getLastRow(); — чтобы не перебирать по всем строчкам листа, достаточно получить последнюю заполненную строку. Так как в ячейке чекбокса хранится либо true либо false, такая ячейка так же считается заполненной.

for(let i = 1; i <= endPosition; i++){ — прохожу с первой строки до последней заполненной строки включительно.

if (ws.getRange('A' + i).getValue() === true || ws.getRange('A'+ i).getValue() === false && ws.getRange('A'+ i).getValue() !==''){ — если в ячейке есть значение true ИЛИ false И она не пустая, то:

allCheckBoxesArr.push(ws.getRange('A' + i).getRowIndex()); — в массив записывается индекс строки, где есть чекбокс.

Далее уже можно скрывать и раскрывать строки:

function hideUnhideRows(){
  const checkBoxesRowArr = getAllCheckBoxes();

  for (let row of checkBoxesRowArr){

     if(ws.getRange('A' + row).getValue() == true){
       ws.hideRow(ws.getRange('A' + (row +1)))
     } else { 
       ws.unhideRow(ws.getRange('A' + (row +1)))
     }
  }
} 

Здесь, как видно ничего сложного и hideRow(), равно как и unhideRow() происходит на основе значения чекбокса.

Ну и последнее, вешаю функцию на onEdit():

function onEdit(){
  hideUnhideRows()
}

Всё. Скриптовая часть закончена.

Шаг 3: Условное форматирование

Через условное форматирование, закрашиваю зеленым и зачеркиваю строку с задачей:

Результат:

При клике на чекбокс, строка ниже скрывается, задача зачеркивается:

При повторном клике на чекбокс, происходит возврат к исходному состоянию:

У этой записи 3 комментариев

  1. Руслан

    Доброго времени суток! Дмитрий, подскажи, как интегрировать моё онлайн радио в мой чат в Телеграмме, или как создать бота, пользуюсь
    онлацн радио RadioBOSS если знакомо! буду НУ ООООЧЕНЬ БЛАГОДАРЕН!

    1. Добрый день. К сожалению не смогу помочь, но оставлю комментарий тут, может кто из читающих подскажет.

Добавить комментарий