layui的form.on怎么使用,代码示例
时间: 2024-05-05 12:19:38 浏览: 8
好的,您的要求已经收到。关于您的问题,form.on是layui中表单模块的事件监听方法,我们可以通过它来监听表单的各种事件。下面是一个使用form.on监听select下拉框选择事件的代码示例:
```javascript
layui.use(['form'], function(){
var form = layui.form;
// 监听select下拉框选择事件
form.on('select(select-demo)', function(data){
console.log('您选择的值为:' + data.value); // 打印选中的值
});
});
```
其中,`select-demo`是select元素的lay-filter属性值,用于标识该下拉框。
希望这个例子可以帮到您,如果您有其他问题请随时问我。
相关问题
table表格中使用layui-form
若你想在layui中使用表格,需要先引入layui框架,并且加载layui.form模块。在HTML中,你需要构建一个table元素,并为其添加lay-filter属性,用于layui识别。接着,你需要在JavaScript代码中使用layui.table.render()方法来渲染表格,同时需要将lay-filter属性与表格ID传入。
示例代码如下:
HTML:
```
<table class="layui-hide" id="demo" lay-filter="test"></table>
```
JavaScript:
```
layui.use(['table', 'form'], function(){
var table = layui.table;
var form = layui.form;
//渲染表格
table.render({
elem: '#demo',
url: '/api/table',
toolbar: '#toolbarDemo',
page: true,
cols: [[
{type: 'checkbox'},
{field: 'id', title: 'ID', width: 80},
{field: 'username', title: '用户名', width: 120},
{field: 'email', title: '邮箱', minWidth: 150},
{field: 'sex', title: '性别', width: 80, sort: true},
{field: 'city', title: '城市', width: 100},
{field: 'sign', title: '签名', minWidth: 120},
{field: 'experience', title: '积分', width: 80, sort: true},
{field: 'score', title: '评分', width: 80, sort: true},
{field: 'classify', title: '职业', width: 100},
{field: 'wealth', title: '财富', sort: true},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
});
//监听工具条
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
layer.msg('ID:'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.alert('编辑行:<br>'+ JSON.stringify(data))
}
});
//监听复选框
table.on('checkbox(test)', function(obj){
console.log(obj)
});
//监听单元格编辑
table.on('edit(test)', function(obj){
console.log(obj)
});
//监听排序
table.on('sort(test)', function(obj){
console.log(obj)
});
});
```
上述代码中,我们使用了layui.form模块来监听表格的复选框、单元格编辑和排序功能。同时,在HTML中也定义了一个toolbar,用于添加表格中的操作按钮。
layui form表单点击按钮提交数据
在layui中,可以使用form模块来处理表单的提交操作。以下是一个示例代码,演示如何在点击按钮时提交表单数据:
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="username" 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="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submitForm">提交</button>
</div>
</div>
</form>
```
JavaScript代码:
```javascript
// 引入layui模块
layui.use(['form'], function() {
var form = layui.form;
// 监听表单提交事件
form.on('submit(submitForm)', function(data) {
// 获取表单数据
var username = data.field.username;
var password = data.field.password;
// 打印获取的表单数据
console.log('用户名:', username);
console.log('密码:', password);
// TODO: 在这里可以进行表单提交等操作
return false; // 阻止表单默认提交
});
});
```
在上述示例中,我们使用layui的form模块监听了表单的提交事件,并通过`data.field`获取到了表单中输入的数据。你可以根据自己的需求,在监听事件中进行表单数据的处理、验证、提交等操作。最后,使用`return false`阻止表单的默认提交行为。