Автор оригинала: Nishikant Yadav.
Обо мне
Я старший интерфейс разработчик с 8+ лет опытом. Иметь опыт на технологиях, таких как угловые JS, угловые 4+ версий, JS, карма, жасмин, jQuery, HTML5, CSS3, NPM и т. Д.
Проблема, которую я хотел решить
У нас было требование сетки с некоторыми пользовательскими требованиями. Мы хотели использовать компонент стола «Угловые материалы», чтобы сохранить вид и чувствовать себя последовательным в общем приложении.
Что такое индивидуальная сетка с встроенным редактированием?
Это многоразовая и динамически настраиваемая сетка компонента. Мы не хотели использовать какую-либо третью сторону, отдельно от углового материала. Я разработал динамически настраиваемую сетку, которая генерируется из вариантов, приведенных в качестве ввода в виде JSON. Сетка имеет функции, такие как сортировка, встроенные редактирование, цветные узоры, пагинация, столбцы действий, клетки с входами в формах типа, такие как TextBox, раскрывающиеся спички, радиопередачи, флажок и т. Д. В качестве редактируемой сетки, я предоставил сохранение функциональных возможностей для сохранения окончательных данных. сетки.
Tech Stack
Угловой 6, угловой материал, JavaScript, HTML5, CSS3
Процесс строительства индивидуальной сетки с встроенным редактированием
Я использовал столик угловых материалов, компоненты Paginator для создания основной сетки. Затем я работал над встроенной частью редактирования, за то, что я использовал угловую реактивную форму. Сетка становится сборкой с ввода JSON, который будет иметь метаданные для сетки, как редактируемые, тип ячейки, цвет и т. Д.
Проблемы я столкнулся
Назначение ключей
Компоненты угловых материалов эффективно использовали угловые реактивные формы многоразовых компонентов.