Редактирование полей таблицы с разными типами HTML5

Name: Редактирование полей таблицы с разными типами HTML5
Availability: InStock
Author: Falcon Space

В этом примере была реализовано редактирование полей с различными типами HTML5: password, email, url, tel, number, range, time

Необходимо указать правильный тип редактирования в "Колонках" таблицы в поле Редактирование поля

Пример процедуры GetItems с настройками editable:

CREATE PROCEDURE [dbo].[crud_watch_numfield_getItems]
	@filters CRUDFilterParameter READONLY,  
	@sort sql_variant,
	@direction nvarchar(8),
	@page int,
	@pageSize int,
	@username nvarchar(32)
AS
BEGIN
	-- SELECT 1
	select id, name, 
    isnull(password, '') password,
    isnull(email, '') email,
    isnull(url, '') url,
    isnull(tel, '') tel,
    isnull(number, '') number,
    isnull(range, '') range,
    isnull(time, '') time,
    '{"min":0, "max":200, "step":5}' editable_number,
    '{"min":50, "max":80, "step":0.5}' editable_range
    
	from tst_numfield
	order by id
	
	-- SELECT 2
	select count(*) from tst_numfield
    
    -- SELECT 3
    select 'Измените числовое поле' title, 'h3' headerTag, 1 HideTitleCount
END

Другие демостенды

— Как редактировать поля прямо в таблице на сайте
— Вставка ссылки на видео youtube в форме на сайте

Что есть в базе знаний по этой теме

— Как установить ширину колонки в таблице
— Отображение таблиц на смартфоне
— Создание сущности с учетом значений фильтров
— Оптимизация запроса SQL - извлечение данных для таблицы
— Сортировка drag n drop строк в таблице
— Как гибко управлять видимостью столбцов таблицы
— Редактирование данных в колонках таблицы - updateField

В чем выгода для бизнеса?

Поддержка современных типов полей HTML5 (email, tel, number) улучшает ввод на мобильных устройствах и добавляет встроенную валидацию. Вы повышаете точность данных и удобство для пользователей.