Простые шаги для проверки данных в электронной таблице JavaScript

Проверка данных — это процесс обеспечения точности данных. Это гарантирует, что данные соответствуют определенным требованиям, необходимым для дальнейшего анализа данных. После проверки вы можете доверять используемым вами данным, чтобы они были точными, чистыми и полезными. Обеспечение точности данных, которые вы используете, является упреждающей стратегией защиты ваших наиболее ценных данных.

В этом сообщении блога мы увидим, как включить функцию проверки данных в Syncfusion JavaScript Spreadsheet. Таким образом, вы можете потребовать от пользователей вводить данные или значения только определенного типа и не допускать ввода неверных данных в ячейки.

Где можно найти варианты проверки данных?

На вкладке Данные на ленте вы найдете раскрывающуюся кнопку проверки данных.

Кнопка раскрывающегося списка «Проверка данных» содержит следующие параметры:

Проверка данных
Выделите неверные данные
Очистить выделение
Очистить проверку

Проверка данных

Электронная таблица JavaScript поддерживает следующие параметры проверки данных:

Целое число: разрешает ячейке принимать только целые числа.
Десятичный: разрешает ячейке принимать только десятичные числа.
Список: выбирает данные только из раскрывающегося списка.
Дата: разрешает ячейке принимать только значения даты.
Время: разрешает ячейке принимать только значения времени.
Длина текста: ограничивает длину текста.

С помощью этой функции вы можете установить правила проверки в диалоговом окне «Проверка данных», как показано на следующем снимке экрана.

Выделите неверные данные

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

Очистить выделение

Эта функция очищает выделение от недействительных ячеек. Вы также можете выделить ячейки еще раз, если хотите.

Очистить проверку

Эта функция позволяет удалить примененную проверку из указанного диапазона ячеек или всего рабочего листа.

Добавление проверки данных в электронную таблицу JavaScript с помощью кода

Кроме того, вы можете добавить проверку данных в электронную таблицу JavaScript с помощью кода, используя метод addDataValidation, и передать необходимые параметры проверки с помощью этого метода.

В следующем примере кода демонстрируется функция проверки данных с расчетом брутто-зарплаты.

/**
  * Data validation
  */

    //Initialize the Spreadsheet component.
    let sheet: SheetModel[] = [
        {
            ranges: [{
                dataSource: (dataSource as any).grossPay,
                startCell: 'A3'
                },
            ],
            name: 'Gross Pay',
            rows: [{
                        cells: [{ value: 'Gross Pay Calculation',
                        style: { fontSize: '20pt', fontWeight : 'bold', textAlign: 'center', backgroundColor: '#B3FFB3',
                        verticalAlign: 'middle'} }]
                    },
                    {
                        index: 13,
                        cells: [{
                            index: 7, value: 'Total Gross',
                            style: { border: '1px solid #A6A6A6', textAlign: 'center', verticalAlign: 'middle', fontWeight: 'bold'} },
                        {
                            index: 8, formula: '=Sum(I4:I13)', format: '$#,##0.00',
                            style: { border: '1px solid #A6A6A6', textAlign: 'center', verticalAlign: 'middle', fontWeight: 'bold'}
                        }]
                    }
            ],
            columns: [
                { width: 88,  }, { width: 120 }, { width: 106 }, { width: 98 }, { width: 110 },
                { width: 110 }, { width: 110 }, { width: 98}, { width: 130}
            ]
        }  ];

    //Initialize the SpreadSheet control.
    let spreadsheet: Spreadsheet = new Spreadsheet({
        sheets: sheet,
        created: () => {
            spreadsheet.merge('A1:I2');
            spreadsheet.setBorder({ border: '1px solid #A6A6A6' }, 'A1:I13');
            spreadsheet.cellFormat({ textAlign: 'center', verticalAlign: 'middle'}, 'A3:I13');
            spreadsheet.cellFormat({ backgroundColor: '#B3FFB3', fontWeight : 'bold'}, 'A3:I3');
            spreadsheet.numberFormat('$#,##0.00', 'H4:I13');
            spreadsheet.wrap('H3:I3');
            //Add Data validation to range.
            spreadsheet.addDataValidation({ type: 'WholeNumber', operator: 'LessThan', value1: '9', ignoreBlank: false }, 'G4:G13');
            spreadsheet.addDataValidation({ type: 'TextLength', operator: 'GreaterThan', value1: '3', ignoreBlank: false }, 'B4:B13');
            spreadsheet.addDataValidation({ type: 'Date', operator: 'GreaterThan', value1: '4/5/2021’, ignoreBlank: false  }, 'C4:C13');
            spreadsheet.addDataValidation({ type: 'Time', operator: 'LessThan', value1: '6:00:00 PM', ignoreBlank: false  }, 'F4:F13');
            spreadsheet.addDataValidation({ type: 'List', value1: 'Mon, Tue, Wed, Thu, Fri', ignoreBlank: false  }, 'D4:D13');
            //Highlight Invalid Data.
            spreadsheet.addInvalidHighlight('G4:G13');
        }
    });

    spreadsheet.appendTo('#spreadsheet');

После выполнения предыдущего примера кода мы получим вывод, как показано на следующем снимке экрана.

Ссылка

Для получения дополнительной информации см. Демонстрация проверки данных в электронных таблицах JavaScript.

Заключение

Спасибо за прочтение! Надеюсь, теперь вы лучше понимаете функцию проверки данных в элементе управления Syncfusion JavaScript Spreadsheet. С помощью этой функции вы можете легко запретить пользователям вводить неверные данные и обеспечить их точность. Также см. документацию Проверка данных в электронных таблицах JavaScript для получения дополнительной информации.

В следующих блогах мы обсудим другие функции. Что еще вы ожидаете от электронной таблицы? Пожалуйста, поделитесь своими мыслями в разделе комментариев к этому сообщению в блоге.

Если вы уже являетесь пользователем Syncfusion, вы можете загрузить Essential Studio for JavaScript настройка продукта, чтобы опробовать этот элемент управления. В противном случае вы можете скачать бесплатную 30-дневную пробную версию.

Если у вас есть какие-либо вопросы об этих функциях, свяжитесь с нами через наш форум поддержки, Direct-Trac или портал обратной связи. Мы рады Вам помочь!

Связанные блоги

Первоначально опубликовано на https://www.syncfusion.com 3 сентября 2021 г.

Простые шаги для проверки данных в электронной таблице JavaScript