AdminJ layui-form-render
На основе Layui разработан конструктор форм, который является подпроектом одного открытого исходного проекта. В основном он вдохновлён VUE form render от Арили. На данный момент проект находится на начальной стадии разработки и не интегрирован с Layui. Для интеграции достаточно поместить содержимое HTML>body в переменную и вставить его в начало функции render().
AdminJ layui-form-render не только генерирует HTML-форму, но также предоставляет компонент инициализации данных AdminJFormData (данные формы) и функцию генерации кода проверки (см. editor_base.html).
Демонстрационный адрес: http://47.244.155.29:13308/editor/editor.html
Адрес демонстрации для расширения кнопок «влево» и «вправо» и свойств: http://47.244.155.29:13308/editor/editor_external.html
Основан на разработке Layui, используются следующие плагины:
Плагин | Описание |
---|---|
sortable | Очень крутая функция перетаскивания и сортировки |
jquery-sortable | Позволяет sortable поддерживать плагин Jquery |
select2 | Выпадающий список с множественным выбором |
ckeditor5 | Редактор текста H5 |
var formRender = new AdminJLayuiFormRender();
formRender.exportToHTML();//экспорт html
formRender.importJSON('json');//импорт для обратного создания html
formRender.exportJSON();//экспорт JSON
formRender.disabledAll(formId, true/false);//отключить/включить все поля
formRender.disabled(formId, ['title','username'], true/false);//отключить/включить title, username
Параметр | Описание |
---|---|
id | Идентификатор компонента |
label | Метка |
name | Уникальное имя ввода |
labelWidth | Ширина столбца метки |
rowWidth | Ширина строки |
inputWidth | Ширина поля ввода |
validateRule | Правила проверки |
comment | Текст после поля ввода |
required | Обязательное поле (выбор) |
placeholder | Подсказка внутри поля ввода |
defValue | Значение по умолчанию |
minValue | Минимальное значение |
maxValue | Максимальное значение |
minLength | Минимальная длина |
maxLength | Максимальная длина |
options | Массив (радио, флажок, выбор) |
layuiSkin | Отображение флажка в стиле layui |
dateFormat | Формат времени |
currentTime | Текущее время как начальное значение |
milliscondFormat | Форматирование данных при отправке в миллисекундах |
startDateName | Имя начального времени в диапазоне времени |
endDateName | Имя конечного времени в диапазоне времени |
showInput | Отображать ли ползунок ввода |
suffix | Суффикс, отображаемый при перетаскивании ползунка |
rateCount | Общее количество звёзд рейтинга |
uploadType | Тип файла для загрузки массива |
minSize | Минимальный размер файла загрузки |
maxSize | Максимальный размер файла загрузки |
uploadUrl | Адрес загрузки файла |
uploadCount | Максимальное количество загружаемых файлов |
groupCount | Количество групп в макете с несколькими группами |
AdminJFormData — это расширение form render. Если вы выберете длину, максимальное значение, минимальное значение и другие проверки в экспортированном HTML-коде формы, а также используете редактор или ползунки, AdminJFormData автоматически инициализирует эти компоненты и генерирует функции проверки. Это значительно экономит время по сравнению с form render.
Интеграция AdminJFormData
<script src="adminj/adminj_form.js"></script>
<script src="adminj/adminj_utils.js"></script>
var adminJFormData = layui.adminJFormData;
adminJFormData.init(_json, 'form');//_json — это код, автоматически сгенерированный при экспорте HTML из form render, второй параметр — значение фильтра формы lay
var d={"hidden":"f","text":"123","textarea":"nn","password":"1222333","select":"2","radio":"2","checkbox":["0","2"],"select2":["0","2"],"color":"#0f3e62","switch":"1"};
adminJFormData.setData('form',d);//Первый параметр — значение фильтра формы lay, массив checkbox и select2 должен быть передан
var data = adminJFormData.getData('form');//Первый параметр — значение фильтра формы lay
О результатах загрузки изображений: Сервер должен возвращать результат в формате json с данными {resultCode:0,message:"",result:результат}. Если это загрузка нескольких файлов, то данные, полученные getData, будут массивом, а для одного файла — строкой.
resultCode | 0 | Успешная загрузка возвращает 0 |
---|---|---|
result.filename | xx.jpg | Успешно загруженное имя файла |
Пример использования:
layui.use('element', function () {
var adminJFormData = layui.adminJFormData;
adminJFormData.init(_json, 'form');
//Инициализируем данные формы
var d={"hidden":"f","text":"123","textarea":"nn","password":"1222333","select":"2","radio":"2","checkbox":["0","2"],"select2":["0","2"],"color":"#0f3e62","switch":"1"};
adminJFormData.setData('form',d);
layui.form.on('submit(postButton)', function
``` **Бесконечный каскадный выбор данных API-интерфейса**
**Отправка данных**
| parentId | Идентификатор верхнего уровня | Инициализация: передача значения. В случае самого верхнего уровня parentId передаётся как пустая строка |
|----------|------------------------------|-----------------------------------------------------------------------|
| selectId | Выбранный идентификатор | При редактировании передаётся значение. Вместе с parentId передаётся только один параметр — selectId. Сервер должен вернуть данные уровня, на котором находится selectId, и список всех данных уровней выше него. Если передан selectId, то parentId не используется |
**Возвращаемые данные**
| isSelect | Выбор | «0» — да, «1» — нет |
|----------|-------|-----------------------------------------------------------------------|
| text | Текст для отображения | |
| value | Значение выбора | |
Пример полного набора данных, возвращаемых при передаче parentId:
{"resultCode":0,"result":[{"isSelect":"1","text":"title0","value":"0"},{"isSelect":"1","text":"title1","value":"1"},{"isSelect":"1","text":"title2","value":"2"}]}
Пример полного набора данных, возвращаемых при передаче selectId:
{"resultCode":0,"result":[[{"isSelect":"1","text":"title0","value":"0"},{"isSelect":"1","text":"title1","value":"1"},{"isSelect":"0","text":"title2","value":"2"}],[{"isSelect":"1","text":"title0","value":"0"},{"isSelect":"1","text":"title1","value":"1"},{"isSelect":"0","text":"title2","value":"2"}],[{"isSelect":"1","text":"title0","value":"0"},{"isSelect":"1","text":"text1","value":"1"},{"isSelect":"0","text":"title2","value":"2"}]]}
#### Вклад участников
#### 2. Простое объяснение
В HTML найдите следующий код:
11–26. Исправлена ошибка в adminJFormData, добавлена функция отключения формы, добавлены расширенные кнопки «влево» и «вправо» и демонстрация свойств.
8–2. Добавлен бесконечный каскадный выбор. Изменён результат запроса AJAX при возврате ключа name, включая запрос данных и загрузку файлов. Стандарт: {resultCode:0,message:"",result:результат}. Можно настроить в config.ajaxRequestName.
8–1. Выпущена версия AdminJFormData.
2021-7-2?. Выпущена первая версия рендеринга форм.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )