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

OSCHINA-MIRROR/fkdexq-LayUI.autoForm

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
README.md 9.1 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
Отправлено 09.03.2025 08:35 cbe0e73

Компонент формы layui.autoform

Описание

Компонент формы в LayUI

Архитектура программного обеспечения

Основана на модульных компонентах LayUI

Инструкция по установке

layui.config({
    base: '/js/', // корневой каталог расширяемых модулей
})
.extend({
    autoform: '/autoform/autoform'
});

Инструкция по использованию```

<! -- Контейнер формы -->

```
layui.use('autoform', function () {
    // Пример отрисовки формы
    var formobj = autoform.render({
        elem: '#addeditDiv', // ID слоя, который требуется отрисовать
        form: { id: 'addeditForm', filter: 'addeditForm' }, // id - это ID формы, filter - это lay-filter, если filter не указан, он будет равен id
        // Другие параметры формы по умолчанию: showButton: false, labelcss: '', inputcss: '', showButton - показывать ли кнопки "OK", "Сброс", labelcss - стиль ширины столбца меток, inputcss - стиль ширины столбца полей ввода
        fields: [
            { field: 'Id', title: 'ID', type: 'hide' },
            { field: 'FacCode', title: 'Идентификатор производителя', type: Yöntem: 'text', comment: 'Генерируется автоматически серверной частью', readonly: true },
            { field: 'FacName', title: 'Название производителя', type: 'text', verify: true },
            { field: 'FacShortName', title: 'Краткое название производителя', type: 'text' },
            { field: 'OrgCode', title: 'Код организации', type: 'text' },
            { field: 'FacType', title: 'Тип производителя', type: 'checkbox', option: { "Производитель": 0, "Поставщик": 1, "Ремонтник": 2 }, verify: true, skin: "primary" },
            { title: 'Это разделительная линия', type: 'hr' },
            { field: 'YwLinkMan', title: 'Контактное лицо по бизнесу', type: 'text' },
            { field: 'YwLinkPhone', title: 'Телефон контактного лица по бизнесу', type: 'text' },
            { field: 'JsLinkMan', title: 'Контактное лицо по технике', type: 'text' },
            { field: 'JsLinkPhone', title: 'Телефон контактного лица по технике', type: 'text' }
        ]
    });
});
``````markdown
        [
            { field: 'Area', title: 'Область', type: 'select', option: { "": "", "Пекин": 0, "Шаньдун": 1, "Гuangzhou": 2 }, verify: false },
            { title: 'Это вторая разделительная линия', type: 'hr' },
            { field: 'Email', title: 'Электронная почта', type: 'text' },
            { field: 'Fax', title: 'Факс', type: 'text' },
            { field: 'LinkAddress', title: 'Адрес связи', type: 'text' },
            { field: 'CreateDate', title: 'Дата создания', type: 'laydate' },
            { field: 'Status', title: 'Статус активации', type: 'radio', option: { "Активирован": 1, "Неактивирован": 2 } },
            { field: 'Remark', title: 'Примечание', type: 'textarea', comment: 'Примечание' },
            { field: 'testhtml', title: 'Тестовый html', type: 'html', html: '<select name="city" id="city" lay-verify="required"><option value=""></option><option value="0">Пекин</option></select>' },
        ],
        renderComplete: function() {
        },
        formSubmit: function(formVal) {
            $.ajax({
                url: 'addediturl',
                data: formVal,
                async: true,
                type: "POST",
                success: function(item) {
                    if (item.IsSuccessed) {
                        layer.msg("Выполнение успешно!", {icon: 1, time: 2000});
                        layer.closeAll('page');
                    } else {
                        layer.msg("Выполнение не удалось: " + item.Message, {icon: 2, time: 4000});
                    }
                }
            });
        }
    ```

formobj.submit(fun); // Вызывает отправку формы; fun — метод, вызываемый перед отправкой, если он возвращает false, отправка будет заблокирована.
formobj.```markdown
reset(fun); // Вызывает сброс формы; fun — метод, вызываемый после сброса, используется для установки значения по умолчанию для какого-либо элемента управления.
formobj.formVal(formVals); // Устанавливает значения формы; formVals — объект значений формы, например {'FacCode': '123', 'FacName': 'test'}.
formobj.formSubmit(fun(formVal)); // Метод отправки формы, который заменяет метод renderFormSubmit.
formobj.openDiv(title, area, formVal); // Отображает модальное окно с формой; title — заголовок окна, area — ширина и высота окна (по умолчанию ['700px', '700px']), если установлено значение 'auto', то высота автоматически подстраивается под содержимое, formVal — значения формы, если не указано, то откроется пустая форма.
formobj.openDivMax(title, area, formVal); // Аналогичен методу openDiv, но открывает модальное окно в максимальном размере.

Параметры поля fields: field: имя элемента name type: тип элемента управления, может быть hide, hr, text, select, checkbox, radio, html, switch, laydate, laytime, laydatetime, layyear, laymonth comment: примечание к элементу управления readonly: является ли элемент только читаемым, true/false verify: обязательность заполнения, true/false/строка, если это строка, то правило проверки совпадает с правилами lay-verify: phone, email, url, number, date, identity option: значения атрибута name для элементов управления select, checkbox, radio, например { "": "", "Пекин": 0, "Шанхай": 1, "Гуанчжоу": 2 }, "": "" — пустое значение используется как подсказка выбора range: включение режима выбора диапазона для элементов управления laydate, laytime и т.д., true/false, true — включено skin: тема для элементов управления checkbox, если не указана, используется стиль layui, primary — оригинальная тема html: пользовательский HTML-элемент, использует тип 'html' });

#### Пример вывода
<img src="https://images.gitee.com/uploads/images/2020/0613/175444_fd4b06c1_727020.png" width="65%" />
<img src="https://images.gitee.com/uploads/images/2020/0613/175458_40221942_727020.png" width="65%" />#### Функции Gitee
```1. Используйте Readme_XXX.md для поддержки различных языков, например Readme_en.md, Readme_zh.md
2. Официальный блог Gitee [blog.gitee.com](http://blog.gitee.com)
3. Вы можете использовать этот адрес [https://gitee.com/explore](https://gitee.com/explore) для знакомства с лучшими открытыми проектами на Gitee
4. [GVP](https://gitee.com/gvp) расшифровывается как Самый ценный открытый проект на Gitee — это отличные открытые проекты, выбранные командой Gitee
5. Официальное руководство по использованию Gitee [https://gitee.com/help](https://gitee.com/help)
6. Проект "Звезды Gitee" представляет собой раздел, где демонстрируются достижения членов сообщества Gitee [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

Опубликовать ( 0 )

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

1
https://api.gitlife.ru/oschina-mirror/fkdexq-LayUI.autoForm.git
git@api.gitlife.ru:oschina-mirror/fkdexq-LayUI.autoForm.git
oschina-mirror
fkdexq-LayUI.autoForm
fkdexq-LayUI.autoForm
master