-
将后台传来的数据回显到Layui开关中
2020-07-25 15:13:40文章目录一. 问题背景二....参考自: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属性
-
Day02 Layui 动态修改switch开关值,改变开关默认存值,改变开关默认文本
2018-05-15 16:35:32动态修改switch开关值 1.定义一个switch开关,默认为开(checked=”checked”) &amp;amp;lt;div class=&amp;quot;layui-form-item&amp;quot;&amp;amp;gt; &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开关,动态的去控制它是否被启用的方法
2020-10-16 08:36:38今天小编就为大家分享一篇LayUi使用switch开关,动态的去控制它是否被启用的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
layui状态禁用_LayUi使用switch开关,动态的去控制它是否被启用的方法
2020-12-20 12:48:29layui中的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开关,动态的去控制它是否被启用的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
-
jQuery控制layui的switch开关状态( 动态关闭开关按钮)
2020-01-30 13:00:15需求如下图所示: 代码如下: <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开关,动态的去控制它是否被启用
2019-06-07 19:01:57layui中的switch开关,能够去显示当前的状态,是否是启用还是禁用。当时如果当前记录的某个值没有进行填写,这行记录就不能被启用。并且页面上也要让他不能进行操作。 直接上代码: // 页面状态栏事件监听 ... -
layui switch 开关根据传入值默认选中或不选
2019-09-16 10:11:52layui switch 开关根据传入值默认选中或不选 参考: http://www.jiaochengku.net/ITjiaocheng/wangyezhizuo/4044.html 动态修改switch开关值,改变开关默认存值,改变开关默认文本 ... ...使用templet(... -
vue项目中使用v-for动态渲染时layui的表单开关无法正常显示问题解决
2020-04-23 21:55:321.检查外层div是否有class=“layui-form”,或者class包含layui-form的,例如<table class="layui-table layui-form">这样.因为官方文档中确实描述了: 2.如果class没有问题,那么就要从vue渲染的角度去考虑了... -
动态修改layui switch 状态
2021-01-04 12:01:23这里写自定义目录标题动态修改layui switch 状态 动态修改layui switch 状态 转载自:https://www.cnblogs.com/qiaochaoyu/p/12986607.html 方法1: 修改原始input的checked状态, 重新渲染 layui.jquery(‘input... -
layui admin table表格中根据后台数据动态渲染switch开关
2018-12-27 16:23:55使用templet(模板),将开关放到table里面 ,{field:'state', title: '状态',align:'center',templet: statusTpl} 模板有两种方式定义,根据自己喜好选择其中一种: 第一种 //是否启用模板 var statusTpl = ... -
动态修改layui switch 状态 与获取layui switch的值
2020-10-23 20:13:51<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. -
根据后台传递的值控制Layui中的开关状态!亲测有效
2019-11-21 15:22:031,这里是html代码此时按钮是没有checked属性的,所以默认为关闭状态2,这里是Js代码这里的result.data.orgProblemStatus就是我从后台动态获取的值3,最后总结 ...div class="layui-form-item"> <blockquote... -
layui中的switch切换在表格中改变时提示;
2019-09-17 19:14:05在layui中,动态表格添加开关switch切换状态设置;错误时返回提示,并返回默认状态; 方法一、 form.on('switch(switchTest)', function(data){ var that = data.elem; var checked = data.elem.checked; var... -
layui 表格加入表单元素,取行数据值传到后台问题
2020-02-18 21:29:10最近 django + layui 写网站时候想实现在表格里加入开关和按钮功能,遇到往后台传值问题,参考几个文章都没解决,经过研究 layui 的功能语法,特将解决方法记录。 1. 想实现表格中加入按钮和开关 有一个需求,想在... -
RXThinkCMF_TP6 v1.0.6 旗舰版发布,新增生成模块创建模块菜单及权限节点的功能
2020-07-17 13:37:262、【新增】新增动态生成开关按钮及对应JS事件和方法处理的功能; 3、【新增】新增生成模块文件时创建模块菜单及权限节点,设置角色权限后可以直接访问当前生成的模块; 4、【新增】完善上传图片组件,新增图片裁剪... -
1.一些fix,关于封装工具类以及layui模板优化等. 2.优化表备注的获取逻辑. 3.生成时间格式改为yyyy-MM-dd,移除具体的时间,只保留日期 2020.05.22 1.新增insert-sql模式,支持对"insert into table (xxx) values (xxx...
-
贴片STC最小系统资料包v3.4.rar
-
华为1+X——网络系统建设与运维(高级)
-
Slf4j与log4j及log4j2的关系及使用方法
-
2020中国网络电影行业年度报告-中国电影家协会.pdf
-
java容器类总结——基于JDK1.8
-
精通编译Makefile,Nina, 从底层uboot到Android
-
SVN基本常用操作命令
-
c1任务学习感受
-
2019年下半年 网络工程师 应用技术.docx
-
java实现blob字段,不同库之间互存(不同的数据库地址,不使用dblink)
-
stc89c52rc摇摇棒
-
2019年下半年 网络工程师 基础知识.docx
-
牛牛量化策略交易
-
Altera(Intel)_MAX10_10M02SCU169开发板PDF原理图+Quartus逻辑例程+开发板文档资料.zip
-
用Go语言来写区块链(一)
-
C语言零基础入门(详细讲解)
-
使用 Linux 平台充当 Router 路由器
-
项目管理工具与方法
-
Tomcat.png
-
零基础一小时极简以太坊智能合约开发环境搭建并开发部署