1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/adminj-layui-form-render

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
README.md 11 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
gitlife-traslator Отправлено 30.11.2024 00:51 5ce203b

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 (editor_base.html)

AdminJFormData — это расширение form render. Если вы выберете длину, максимальное значение, минимальное значение и другие проверки в экспортированном HTML-коде формы, а также используете редактор или ползунки, AdminJFormData автоматически инициализирует эти компоненты и генерирует функции проверки. Это значительно экономит время по сравнению с form render.

  • Как использовать: просто вставьте экспортированный HTML-код формы из form render в editor_base.html, и всё готово.

Интеграция AdminJFormData

  • Инициализация AdminJFormData: импортируйте js
<script src="adminj/adminj_form.js"></script>
<script src="adminj/adminj_utils.js"></script>
  • Получите объект AdminJFormData
var adminJFormData = layui.adminJFormData;
  • Инициализируйте HTML-форму и различные компоненты, а также начальные значения:
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 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/adminj-layui-form-render.git
git@api.gitlife.ru:oschina-mirror/adminj-layui-form-render.git
oschina-mirror
adminj-layui-form-render
adminj-layui-form-render
master