Как я могу включить различные оповещения для удаления строк в таблице?

Я создал таблицу CRUD, в которой вы можете удалять строки, устанавливая флажки. Теперь я хочу добавить следующие условия:

  • Если ни одна строка не выбрана, должно появиться сообщение «Нет выбранных строк».
  • Если выбраны все строки, то появится сообщение "Удалить все строки?" должно появиться.
  • При нажатии на отдельные строки появляется сообщение «Удалить эти строки?» появляется.

Как мне это реализовать?

Мой код:

  // To delete selected rows
  deleteSelectedRows(): void {
    const rowsToRemove = this.rows.value.filter((v: any) => v.select).map((v: any) => v.calculatoryBookingsLineValuesId);
    const formArray = this.calcBookingsForm.get('rows') as FormArray;
    if (rowsToRemove && rowsToRemove !== null) {
      const ctrls = [...formArray.controls];
      formArray.clear();
      let index  = 0;
      for (const ctrl of ctrls) {
        if (!rowsToRemove.includes(ctrl.value.calculatoryBookingsLineValuesId)) {
          ctrl.get('calculatoryBookingsLineValuesId').setValue(`${index}`);
          formArray.push(ctrl);
          index += 1;
        }
      }
      this.rows = formArray;
    }
  }

// Selected all rows
  public toggleCheckboxes() {
    this.all = !this.all;
    for (const formGroup of this.rows.controls) {
      formGroup.get('select').setValue(this.all);
    }
  }

Вы хотите показать только эти 3 сообщения? Я так понимаю все остальное работает?

Amadou Beye 14.12.2020 13:59

Да, в соответствии с вышеуказанными условиями. Я пробовал, но как-то не получилось. Есть ли у вас какие-либо идеи?

user10114552 14.12.2020 14:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
112
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если rowsToRemove действительно содержит строки для удаления, вы можете сделать это:

if (rowsToRemove.length === 0) alert('No rows selected');
else {
    let message = rowsToRemove.length === formArray.length ? 'Delete all rows ?' : 'Delete this rows ?';
    if (window.confirm(message)) { 
       // delete rows here
    }
}

Можете ли вы объяснить, как вы различали регистр в блоке else? Есть ли другой способ построить его?

user10114552 14.12.2020 15:22

@and.neo2020, если длина rowsToRemove равна длине formArray, это означает, что выбраны все строки. в противном случае были выбраны только некоторые строки

Amadou Beye 15.12.2020 05:10

Другие вопросы по теме