layui-from swtich使用小结-蒲公英云

layui-from swtich使用小结

以你之姓@ 2023-10-18 22:54 233阅读 0赞

layui-from switch开关使用小结

switch开关单独使用
- switch初始化问题
- swtich自定义提交数据

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;
});