Компонент формы в 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
,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 )