精华内容
下载资源
问答
  • layui开关的input,当第二次点进去怎么才能还原为off状态? <input type="checkbox" name="switch" lay-skin="switch" lay-filter="yyy" lay-text="ON|OFF" > // 可以还原off状态 var formSwitch = $(".layui...

    layui开关的input,当第二次点进去怎么才能还原为off状态?

    <input type="checkbox" name="switch" lay-skin="switch" lay-filter="yyy" lay-text="ON|OFF" >
    
    // 可以还原off状态
    var formSwitch = $(".layui-form-switch");
    formSwitch .find("em").text("OFF")
    formSwitch .prop("class","layui-unselect layui-form-switch")
    
    展开全文
  • Layui开关使用

    千次阅读 2019-09-15 17:34:02
    在列表页面使用layui开关使用 功能介绍: 使用layui开关控制一条数据的状态。0:表示启用 1:表示禁用。 后台框架: SpringMVC+Mybatis 后台页面: Jsp页面 功能展示: 代码实现: ...

    在Jsp列表页面使用layui开关

    1. 功能介绍:
      使用layui开关控制一条数据的状态。0:表示启用 1:表示禁用。

    2. 后台框架
      SpringMVC+Mybatis

    3. 后台页面
      Jsp页面

    4. 功能展示
      在这里插入图片描述

    5. 代码实现
      前台:

    <tbody>
    		<c:forEach items="${resultMap.result.records }" var="r">
    				<tr>
    					<td>
    						<input type="checkbox" name="ids" lay-skin="primary">
    					</td>
    					<td>${r.code }</td>
    					<td>${r.payments }</td>
    					<td>${r.raised }</td>
    					<td>${r.createTime }</td>
    					<td>
    						<input type="checkbox" value="0" name="state" lay-skin="switch" lay-text="启用|禁用" ${r.state eq '0' ? 'checked': '' }>
    						<input type="hidden" id="kaigID" value="${r.id }" />
    					</td>
    				</tr>
    			</c:forEach>
    		</tbody>
    

    前台JS:

    <script>
    		layui.use('form', function() {
    			var form = layui.form; //表单
    			form.on('switch', function(data) {
    				console.log(data.elem.checked); //开关是否开启,true或者false
    				console.log(data.value); //开关value值,也可以通过data.elem.value得到
    				var id = $(data.othis).next("input").val();
    				if(data.elem.checked == true) {
    					$.ajax({
    						type: "post",
    						async: false,
    						data: "id=" + id + "&state=" + 0,
    						url: "changeState",
    						success: function(data) {
    							flag = data
    						},
    					});
    					if(flag == "Ny") {
    						layer.msg("启用状态数不超过三个!");
    					} else {
    						layer.msg("已启用!");
    					}
    				} else {
    					$.ajax({
    						type: "post",
    						async: false,
    						data: "id=" + id + "&state=" + 1,
    						url: "changeState",
    						success: function(data) {
    							flag = data
    						},
    					});
    					if(flag == "yes") {
    						layer.msg("已禁用!");
    					}  
    				}
    
    			});
    		})
    	</script>
    
    

    (layui官方文档)开关被点击时触发,回调函数返回一个object参数,携带两个成员:

    form.on('switch(filter)', function(data){
      console.log(data.elem); //得到checkbox原始DOM对象
      console.log(data.elem.checked); //开关是否开启,true或者false
      console.log(data.value); //开关value值,也可以通过data.elem.value得到
      console.log(data.othis); //得到美化后的DOM对象
    });  
    

    需要引入的js

    <script src="layui/layui.js></script>
    

    功能逻辑:
    当点击开关时,js获取当前数据的ID,layui开关监听事件,会返回true/false,我的功能实现是当返回true时,状态设置为0,携带ID和状态码使用Ajax传给后台处理,反之为false时,状态设置为1

    展开全文
  • &lt;input type="checkbox" name="switch"...这个是layui开关的input,当第二次点进去怎么才能还原为off var o = $(".layui-form-switch"); o.find("em&q
     <input type="checkbox" name="switch" lay-skin="switch" lay-filter="yyy" lay-text="ON|OFF" >
    

    这个是layui开关的input,当第二次点进去怎么才能还原为off

    var o = $(".layui-form-switch");
    o.find("em").text("OFF")
    o.prop("class","layui-unselect layui-form-switch")

    加上这个js代码就可以还原off状态了

    展开全文
  • Layui开关回显的问题

    2020-07-28 11:20:23
    数据表格点击“编辑”,将数据回显到Layui开关 效果: 二. 解决方案 关键是使用prop而不是attr,如下: layer.open({ ... if(checkStatusData.isManager == 1){ body.find('input[name=isManager]').prop(...

    一. 问题背景

    数据表格点击“编辑”,将数据回显到Layui开关

    效果:

    在这里插入图片描述
    在这里插入图片描述

    二. 解决方案

    关键是使用prop而不是attr,如下:

    layer.open({
       	...
          if(checkStatusData.isManager == 1){
              body.find('input[name=isManager]').prop("checked", "checked");
           }else{
               body.find('input[name=isManager]').prop("checked", "");
           }
    	}
    });
    
    展开全文
  • layui开关按钮回显

    千次阅读 2020-01-16 15:15:43
    最近公司在试用layui 框架进行开发,碰到了开关按钮修改回显的问题。下面给大家上代码: 新增开关按钮 <div class="layui-form-item"> <label class="layui-form-label" style="width: 135px;">是否...
  • TP5 layui 开关状态

    2019-03-19 10:18:54
    本文结合 TP5和 Layui做一个简单的开关 最终效果如图: 根据数据库中的字段,0或者 1定义开关是开启还是关闭状态 废话不多说,直接上代码: <div class="layui-form-item"> <labe...
  • layui开关按钮及代码实现

    千次阅读 2020-12-19 16:23:40
    layui开关按钮及代码实现 效果图: 一、html 实现页面 <script type="text/html" id="switch"> {{d.statusStr}}&emsp; @if(shiro.hasPermission("/goodsBrand/updateStatus")){ <input type=...
  • layui开关按钮事件

    千次阅读 2019-07-26 10:46:20
    layui.use(['table','form'], function () { layui.form.on('switch(switchTest)', function (obj) { var onoff = this.checked ? '1' : '0'; $.post('updateNoticeState', { id: obj.value, onoff: onoff }, ...
  • Layui开关Value无法更改问题解决方法

    千次阅读 2019-11-28 11:03:30
    页面初始化时,进行判断开关应该显示ON还是OFF。这里是通过添加和移除class样式来改变开关的开或是关。 这个是开关监控事件,用来监控开关点击开关后,开关的值为多少 既然开关无法更改value,那就自己新建一个隐藏...
  • 文章目录一. 问题背景二....参考自:layui admin table表格中根据后台数据动态渲染switch开关 二. 解决方案 首先给表格的isManager列绑定一个自定义模板,用来显示开关,如下: table.render({ ...
  • 在一个容器中设定class="layui-form"来标识一个表单元素块,通过规范好的HTML...其实就是checkbox复选框的“变种”,通过设定lay-skin="switch"形成了开关风格 <script> layui.use(['form'], function()...
  • layui开关遇见的坑以及用法总结

    万次阅读 2018-10-21 01:16:22
    说的很清楚了,必须有form进行渲染,也就是要放到form中,当然别忘了引入一套layui,下面代码才可以正常显示 &lt;form class="layui-form"&gt; &lt;div class="layui-form-item"...
  • 详细参考该篇文章,点击链接可以直接跳转:http://www.shagua.wiki/project/3?p=95
  • 动态修改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;...
  • layui实现动态显示表格按钮

    千次阅读 2019-04-10 15:28:02
    1.html <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">明细</a> {{# if(d.rewPenStatus == 'confirmation'){ }} ...
  • 在给开关添加确认框之前,先打印了confirm的几种回调,每次的顺序点击为确认按钮、取消按钮、右上角的X按钮。 第一种 1.写法 2.打印值 第二种 1.写法 2.打印值 可以看到点击确认和取消按钮都触发了end,点击X...
  • 关于layui页面动态元素没有渲染出来的解决方案 本文主要介绍angluarJS与layui整合使用过程中页面加载时一些动态元素没有显示出来的解决办法。 1、首先在对应的JS文件中自定义repeatFinish指令 在js的末尾自定义...
  • LayuiTable动态加载列

    2021-08-17 15:26:10
    link href="~/Content/layui/css/layui.css" rel="stylesheet" /> <link href="../../Content/css/checkboxs.css" rel="stylesheet" /> <link href="../../Content/layui/css/modules/layer/default/...
  • 今天小编就为大家分享一篇LayUi使用switch开关,动态的去控制它是否被启用的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui监听开关,自定义传参

    千次阅读 2019-12-06 11:10:33
    layui监听指定开关,自定义传参layui表单使用核心代码(监听开关,提交表单)给表单赋值和...// layui开关div <form class="layui-form" action="" lay-filter="example"> <div class="form-group"> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,142
精华内容 456
关键字:

layui开关动态