精华内容
下载资源
问答
  • 文章目录一. 问题背景二....参考自:layui admin table表格中根据后台数据动态渲染switch开关 二. 解决方案 首先给表格的isManager列绑定一个自定义模板,用来显示开关,如下: table.render({ ...

    一. 问题背景

    后台:SpringBoot
    前端:Layui

    情况前端有一个数据表格,表格中的isManager列是一个开关。后台返回一个isManager数据,值为1或0,根据这个值是0还是1回显到layui的开关中的on或者off

    参考自:layui admin table表格中根据后台数据动态渲染switch开关

    二. 解决方案

    首先给表格的isManager列绑定一个自定义模板,用来显示开关,如下:

    table.render({
        	   ...
        	    ,cols: [[ //表头
        	      ...
        	      ,{field: 'isManager', title: '是否为管理员', align: 'center',
        	                templet: '#switchOnOff'}//根据id选择器绑定自定义模板
        	      ...
        	    ]]
        	  });
        	}
    

    自定义模板,最最最关键的是在开关中使用行内语法{{d.isManager=="1"?"checked":""}}回显后台传来的isManager的值,如下:

    <!--isManager字段的开关按钮-->
    <script type="text/html" id="switchOnOff">
        <input type="checkbox" {{d.isManager=="1"?"checked":""}} name="isManager" lay-skin="switch"
               lay-filter="switchTest"
               lay-text="是|否">
    </script>
    

    其他写法可参考:layui admin table表格中根据后台数据动态渲染switch开关

    总结: layui开关的回显功能,首先在表格内引用模板,然后定义模板,在模板内容引入开关。最最关键是如果想要使开关开就得使开关有checked属性

    展开全文
  • 动态修改switch开关值 1.定义一个switch开关,默认为开(checked=”checked”) &amp;amp;amp;lt;div class=&amp;amp;quot;layui-form-item&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;...

    动态修改switch开关值

    • 1.定义一个switch开关,默认为开(checked=”checked”)
    <div class="layui-form-item">
                    <label class="layui-form-label">是否可用</label>
                    <div class="layui-input-block">
                        <input type="checkbox" lay-skin="switch" name="useable" id="useable" checked="checked" lay-filter="useable">
                        <span class="help-inline">“是”代表此数据可用,“否”则表示此数据不可用</span>
                    </div>
                </div>
    • 2.动态修改switch开关值

    将switch开发中checked属性移除,并刷新

    
    $("#sysData").removeAttr('checked');
    form.render();  //实现全局刷新,元素更新必须使用,否则没有效果
    //form.render(checkbox) // 实现局部刷新,只刷新switch开关
    • 3.改变switch存值

    开关,若为开,则默认存值为“on”,若为关,则默认存值为“”。
    当我们需要不想存为“on”或者“”时,要相应处理进行处理。

    //开关
    <div class="layui-form-item">
                    <label class="layui-form-label">是否系统数据</label>
                    <div class="layui-input-block">
                        <input type="checkbox" lay-skin="switch" name="sysData" id="sysData" checked="checked">
                        <span class="help-inline">“是”代表此数据只有超级管理员能进行修改,“否”则表示拥有角色修改人员的权限都能进行修改</span>
                    </div>
    </div>
    //提交按钮
    <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
    layui.use(['form', 'jquery', 'upload'], function() {
    $ = layui.$;
    var form = layui.form;
    //监听提交
    form.on('submit(*)', function(data) { 
    //submit(*)中的 * 号为事件过滤器的值,是在绑定执行提交的元素时设定的,eg:lay-filter="*"
                        //修改开关的值on或""
                        if(data.field.sysData == "on") {
                            data.field.sysData = "1";
                        } else {
                            data.field.sysData = "0";
                        }
            });
        });
    • 4.改变开关默认文本on/off

    lay-text=”文本1|文本2”
    eg:lay-text=”开启|关闭”

    <div class="layui-form-item">
                    <label class="layui-form-label">是否系统数据</label>
                    <div class="layui-input-block">
                        <input type="checkbox" lay-skin="switch" name="sysData" id="sysData" checked="checked" lay-text="开启|关闭" >
                        <span class="help-inline">“是”代表此数据只有超级管理员能进行修改,“否”则表示拥有角色修改人员的权限都能进行修改</span>
                    </div>
    </div>
    展开全文
  • 今天小编就为大家分享一篇LayUi使用switch开关,动态的去控制它是否被启用的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui中的switch开关,能够去显示当前的状态,是否是启用还是禁用。当时如果当前记录的某个值没有进行填写,这行记录就不能被启用。并且页面上也要让他不能进行操作。直接上代码:// 页面状态栏事件监听form.on('...

    layui中的switch开关,能够去显示当前的状态,是否是启用还是禁用。当时如果当前记录的某个值没有进行填写,这行记录就不能被启用。并且页面上也要让他不能进行操作。

    直接上代码:

    // 页面状态栏事件监听

    form.on('switch', function (data) {

    var swithcData = data;

    var id = data.value;// 获取要修改的ID

    var state = this.checked ? '0' : '2';// 当前状态值

    $.ajax({

    url: '/adChannelConfig/editState',

    data: {

    "id": id,

    "state": state

    },

    error: function (data) {

    console.log(data);

    layer.msg('数据异常,操作失败!');

    },

    // 修改失败,请填写对应的参数

    success: function (data) {

    if (data.data) {

    layer.msg('操作成功!');

    } else {

    layer.msg(data.msg);

    var em = $(swithcData.othis[0]);

    swithcData.othis[0].classList.remove('layui-form-onswitch');

    em.children('em').text('停用');

    }

    }

    });

    });

    当后台发送添加失败的数据过来的时候,走的下面的else,我们把当前DOM对象用一个变量 swithcData 去接收,这个时候去删除到它的class属性。这个是来控制layui的switch的页面显示。

    dom中的0里面,需要点击那个0才能实现,而数字型的属性名不能用“.”来获取,故写成[0]。

    以上这篇LayUi使用switch开关,动态的去控制它是否被启用的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    展开全文
  • 需求如下图所示: 代码如下: <input class="switch" type="checkbox" lay-skin="switch" lay-filter="mode" lay-text="开|关"> ...script type="text/javascript">... layui.use('form', function () { ...

    需求如下图所示: 

    代码如下: 

    <input class="switch" type="checkbox" lay-skin="switch" lay-filter="mode" lay-text="开|关">
    <script type="text/javascript">
        layui.use('form', function () {
            var form = layui.form;
            //开关
            form.on('switch(mode)', function (data) {
    		 var swithcData = data;
                var status = 0;
                if (!data.elem.checked) {
                    status = 1;
                }
                var json = {"id":{$vo.id},"status": status};
                $.post("后端请求地址", json, function (data) {
                        if(data!=null){
                        mui.alert('该支付通道已关闭,暂时无法使用', '提示');
                        //修改switch开关为关闭状态
                        var em = $(swithcData.othis[0]);
                        swithcData.othis[0].classList.remove('layui-form-onswitch');
                        em.children('em').text('关');
                    }
                });
            });
        });
    </script> 

     

    展开全文
  • layui中的switch开关,能够去显示当前的状态,是否是启用还是禁用。当时如果当前记录的某个值没有进行填写,这行记录就不能被启用。并且页面上也要让他不能进行操作。 直接上代码: // 页面状态栏事件监听 ...
  • layui switch 开关根据传入值默认选中或不选 参考: http://www.jiaochengku.net/ITjiaocheng/wangyezhizuo/4044.html 动态修改switch开关值,改变开关默认存值,改变开关默认文本 ... ...使用templet(...
  • 1.检查外层div是否有class=“layui-form”,或者class包含layui-form的,例如<table class="layui-table layui-form">这样.因为官方文档中确实描述了: 2.如果class没有问题,那么就要从vue渲染的角度去考虑了...
  • 这里写自定义目录标题动态修改layui switch 状态 动态修改layui switch 状态 转载自:https://www.cnblogs.com/qiaochaoyu/p/12986607.html 方法1: 修改原始input的checked状态, 重新渲染 layui.jquery(‘input...
  • 使用templet(模板),将开关放到table里面 ,{field:'state', title: '状态',align:'center',templet: statusTpl} 模板有两种方式定义,根据自己喜好选择其中一种: 第一种 //是否启用模板 var statusTpl = ...
  • <div class="layui-form"> <div class="layui-form-item">...开关</label> <div class="layui-input-block"> <input class="test" type="checkbox" name="switch" lay-skin="switch.
  • 1,这里是html代码此时按钮是没有checked属性的,所以默认为关闭状态2,这里是Js代码这里的result.data.orgProblemStatus就是我从后台动态获取的值3,最后总结 ...div class="layui-form-item"> <blockquote...
  • layui中,动态表格添加开关switch切换状态设置;错误时返回提示,并返回默认状态; 方法一、 form.on('switch(switchTest)', function(data){ var that = data.elem; var checked = data.elem.checked; var...
  • 最近 django + layui 写网站时候想实现在表格里加入开关和按钮功能,遇到往后台传值问题,参考几个文章都没解决,经过研究 layui 的功能语法,特将解决方法记录。 1. 想实现表格中加入按钮和开关 有一个需求,想在...
  • 2、【新增】新增动态生成开关按钮及对应JS事件和方法处理的功能; 3、【新增】新增生成模块文件时创建模块菜单及权限节点,设置角色权限后可以直接访问当前生成的模块; 4、【新增】完善上传图片组件,新增图片裁剪...
  • 1.一些fix,关于封装工具类以及layui模板优化等. 2.优化表备注的获取逻辑. 3.生成时间格式改为yyyy-MM-dd,移除具体的时间,只保留日期 2020.05.22 1.新增insert-sql模式,支持对"insert into table (xxx) values (xxx...

空空如也

空空如也

1 2
收藏数 30
精华内容 12
关键字:

layui开关动态