layui 写一个表单,包含:报表名称(文本输入框),报表组(下拉文本输入框),报表路径(文本输入框),报表抽样条件路径(文本输入框),是否启用(开关)
时间: 2023-12-21 07:05:35 浏览: 127
可以使用 layui 的 form 模块和 select 模块来实现这个表单。以下是示例代码:
HTML:
```html
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">报表名称</label>
<div class="layui-input-block">
<input type="text" name="report_name" required lay-verify="required" placeholder="请输入报表名称" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">报表组</label>
<div class="layui-input-block">
<select name="report_group" lay-verify="required">
<option value=""></option>
<option value="group1">分组1</option>
<option value="group2">分组2</option>
<option value="group3">分组3</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">报表路径</label>
<div class="layui-input-block">
<input type="text" name="report_path" required lay-verify="required" placeholder="请输入报表路径" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">报表抽样条件路径</label>
<div class="layui-input-block">
<input type="text" name="sample_path" required lay-verify="required" placeholder="请输入抽样条件路径" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">是否启用</label>
<div class="layui-input-block">
<input type="checkbox" name="enable" lay-skin="switch" lay-filter="switchTest" lay-text="启用|禁用">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
```
JavaScript:
```javascript
<script>
//Demo
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
//监听开关操作
form.on('switch(switchTest)', function(data){
layer.msg('是否启用:'+ (this.checked ? '是' : '否'), {
offset: '6px'
});
// 修改表单项的值
$(data.elem).val(this.checked ? '1' : '0');
});
//监听提交
form.on('submit(formDemo)', function(data){
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
});
</script>
```
其中,form.on('switch(switchTest)', function(data){}) 监听了开关的操作,并且修改了表单项的值。
form.on('submit(formDemo)', function(data){}) 监听了表单的提交操作,将表单的值以 JSON 格式弹出显示。
阅读全文