ВНИМАНИЕ ВНИМАНИЕ

Начато распространение динамических форм VUE. Проект на jquery больше не поддерживается, пожалуйста, перейдите по ссылкам:

• Динамические формы vue + element-ui https://gitee.com/jjxliu306/ng-form-element;
• Динамические формы vue + iview https://gitee.com/jjxliu306/ng-form-iview;
• Динамические формы vue + element-plus https://gitee.com/jjxliu306/ng-form-elementplus.

Шаблоны и функции динамических форм версий iview, element-ui и element-plus полностью совместимы.

На основе расширения конструктора форм Leipi.org, java используется для анализа серверной части (содержание плагина и поля отличаются от оригинальной версии). С уважением к Leipi.org. http://formdesign.leipi.org/.

Анализ полностью выполняется на Java, время ограничено, проблемы эффективности в реализации кода не рассматриваются. Существующие элементы управления уже заблокированы, если вам интересно, вы можете связаться со мной, чтобы добавить их вместе. Кроме того, если есть необходимость в добавлении новых элементов управления, вы также можете связаться с этим человеком (jjxliu306@163.com).

Демонстрационный адрес: http://211.159.185.23:9999/form/index.

Последние изменения:

В настоящее время radio, select, checkbox поддерживают получение данных из серверной части через ajax для комбинирования списков.

Две таблицы данных:

drop table if exists form; -- Пользовательский рабочий процесс create table form ( form_id int auto_increment primary key, form_name varchar(255), template text, -- Исходный html после редактирования страницы html text, -- Обработанный html-код страницы (необходимо проанализировать и отобразить определённые элементы управления, такие как select lictrl) data text, -- jsonarray формат пользовательских полей каждого элемента управления parse text, fields integer, crtime timestamp, modify_time timestamp );

drop table if exists entry; -- Запись каждого рабочего процесса create table entry ( id int auto_increment primary key, form_id int, -- Идентификатор динамической формы value text, -- Фактически в формате json, хранящем данные этой динамической формы, заполненные в этот раз crtime timestamp, modify_time timestamp );

После завершения разработки динамической формы она анализируется и сохраняется в базе данных. В будущем каждый новый рабочий процесс будет отображаться на странице с использованием HTML из формы. После заполнения рабочего процесса значение динамической формы в форме будет преобразовано в jsonobject и проверено и сохранено на сервере.

Ниже приведены некоторые скриншоты текущего проекта.

1. Добавление новой динамической формы:

2. Предварительный просмотр динамической формы:

3. Заполнение динамической формы для установленного рабочего процесса:

4. Просмотр рабочего процесса (только для чтения):

Функции:

Большинство существующих полей в динамической форме Leipi были изменены, например, добавлено notnull (непустое поле), name и title разделены, добавлены параметры данных select, radion, checkbox, полученные через ajax из URL. Подробности следующие:

1. Добавлен параметр notnull для текстовых полей, textarea, select, checkboxes, listctrl и datepicker (саморасширяющиеся элементы управления), после чего последующие входные данные будут проверяться на пустоту на стороне сервера (включая проверку формата для таких типов, как текст и электронная почта).

2. Блокировка единиц измерения, итогов и значений по умолчанию в listctrl, но добавление параметров проверки для каждого столбца (включая типы int).

3. Разделение name и title в каждом элементе управления, где name в основном используется в качестве ключа при сохранении результатов формы, а title используется для подсказки при проверке формы.

4. Параметры данных для select, radio и checkbox получены из URL-адреса на сервере.

Каждый элемент управления выглядит следующим образом:

Текст:

Textarea:

Radio:

Checkboxs:

Select:

Datepicker:

Listctrl:

Наконец, несколько снимков экрана с примерами проектов: