【前端系列-5】layui-from swtich使用小结
layui-from switch开关使用小结
switch开关单独使用
先准备一个测试页面，页面含有一个表单，表单中包含一个开关和一个提交按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<!--layui.css引用，修改成自己项目的路径-->
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<!--layui.js和jQuery的引用，修改成自己的路径-->
<script src="../layui/layui.js" charset="utf-8"></script>
<script src="../js/libs/jquery-2.1.1.min.js"></script>
<form class="layui-form" lay-filter="update_submit">
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" id="switch" lay-skin="switch" lay-text="ON|OFF">
</div>
<div style="margin: 10px 0 0 50px">
<button class="layui-btn" lay-submit="" lay-filter="submit">提 交</button>
</div>
</div>
</form>
<script>
layui.use(['table', 'layer', 'form', 'element', 'laypage', 'laydate'], function () {
var form = layui.form,
element = layui.element;
//监听提交
form.on('submit(submit)', function (data) {
if ($("#switch").is(':checked')) {
data.field.switch = '1';
} else {
data.field.switch = '0';
}
console.log(data.field);
return false;
});
});
</script>
</body>
</html>switch初始化问题
如果后端数据库存储这样一个字段，status：0或1，它决定switch开关的状态，1代表开启，0代表关闭，那么如何前后联动，实现前端switch开关的动态加载呢？
// 根据数据库状态渲染beanshell断言的状态
// 后端返回数据示例：{"data":{"status":1}}
var status= result.data.status;
if (status== '1') {
$("#switch ").attr('checked', 'checked');
} else {
$("#switch ").removeAttr('checked');
}
layui.form.render();swtich自定义提交数据
目前，layui表单提交时，如果switch是开启状态，其值为on，关闭状态则不含有switch的数据，这种设计模式对于编辑前端表单对应的后端数据非常不便，需要在form提交事件中自定义提交值。
//监听提交
form.on('submit(submit)', function (data) {
// 直接获取switch状态的方法
if ($("#switch").is(':checked')) {
data.field.switch = '1';
} else {
data.field.switch = '0';
}
console.log(data.field);
return false;
});
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/08/08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
