layui-from swtich使用小结

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

#### layui-from switch开关使用小结 ####

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

## switch开关单独使用 ##

先准备一个测试页面，页面含有一个表单，表单中包含一个开关和一个提交按钮。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试页面</title>
        
        <link rel="stylesheet" href="../layui/css/layui.css">
    </head>
    <body>
    
    
    <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;
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211X3dpbmQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211X3dpbmQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190805173148928.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211X3dpbmQ=,size_16,color_FFFFFF,t_70