# layui获取、修改checkbox的值
<input type="checkbox" name="MySwitch" value="x" lay-skin="switch" lay-filter="switchTest" lay-text="OFF|ON">
$("input[name='MySwitch']").prop("checked", config.onlyShowError); //修改状态
$("input[name='MySwitch']").prop("checked"); //获取状态
layui.form.render(); //刷新页面 # table.render 处理数据
parseData: function (res) { # 直接修改值
obj.elem.checked = !obj.elem.checked; //获取到元素的值可以直接修改
//layer.tips(this.value + ' ' + this.name + ':'+ obj.elem.checked, obj.othis)//在ajax里使用this 在success function里使用obj.elem获取元素的值
layer.tips(obj.elem.value + ' ' + obj.elem.name + ':'+ obj.elem.checked, obj.othis); //回调时使用

监听开关、发送ajax请求

  //监听指定开关
form.on('switch(switchTest)', function(data){
layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis)
layui.$.ajax({
type:'GET',
data: 'modify=true',
contentType :'application/json',
dataType:'json',
url :'data/mytest.json',
success: function(config) {
layui.$("input[name='MySwitch'").prop("checked", config.onlyShowError);
layui.form.render();
},
error :function(e) {
layer.alert("服务异常, 请检查服务运行状态和日志");
}
});
});

直接修改开关中元素的值

  //监听锁定操作
form.on('checkbox(lockDemo)', function(obj){
layui.$.ajax({
type: 'GET',
data: 'regionId='+obj.value, //将区域id带回去,修改selection标志位
contentType :'application/json',
dataType:'json',
url: 'xxx',
success: function(r) {
if (r.statusMsg != '正确') {
layer.tips(r.statusMsg, obj.othis);
obj.elem.checked = !obj.elem.checked; //获取到元素的值可以直接修改
layui.form.render();
} else {
// layer.tips(this.value + ' ' + this.name + ':'+ obj.elem.checked, obj.othis); //在ajax里使用this 在success function里使用obj.elem获取元素的值
layer.tips(obj.elem.value + ' ' + obj.elem.name + ':'+ obj.elem.checked, obj.othis);
} }
});
});

layui 表格操作

获取数据之后使用parseData: function(r)做数据处理

https://blog.csdn.net/qq_44239383/article/details/107174707

LayUI使用注意的更多相关文章

  1. layui常用方法

    很好用的一个ui组件,弹出,分页等 http://layer.layui.com/ 1 带叉叉的弹窗 layer.open({ type: , title: false, //不显示标题 conten ...

  2. 开源网站.NETMVC+ Layui+SqlSugar+RestSharp

    SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...

  3. 分页组件 - layui.laypage

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 日期时间组件 - layui.laydate

    全部参数 一.核心方法:laydate(options); options是一个对象,它包含了以下key: '默认值' { elem: '#id', //需显示日期的元素选择器 event: 'cli ...

  5. 关于layui

    之前用layer用了很长时间,感觉很好用,最近看到了layui的发布很想尝试尝试. 加入了挺多的功能,比如编辑器,上传,form表单等等.

  6. 日期控件,layui

    <link rel="stylesheet" href="<%=path%>/layui/css/layui.css" type=" ...

  7. 使用的组件:Layui

    Layui 经典模块化前端框架 由职业前端倾情打造,面向所有层次的前后端程序猿,中国最容易使用的前端UI解决方案 Layui 出蛋于2016年金秋,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又 ...

  8. 【开源项目SugarSite】ASP.NET MVC+ Layui+ SqlSugar+RestSharp项目讲解

    SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...

  9. 前端框架layui

    可以了解下jQuery组件layer layui开始使用Layui兼容除IE6/7以外的全部浏览器,并且绝大多数结构支持响应式 弹出层如果你使用的是Layui,那么你直接在官网下载layui框架即可, ...

  10. Layui - 示例

    示例地址 http://www.layui.com/demo/ 下载地址 http://www.layui.com/ 示例代码 <!doctype html> <html> & ...

随机推荐

  1. 公司内部一次关于kafka消息队列消费积压故障复盘分享

    背景现象 1.20晚上8点业务线开始切换LBS相关流量,在之后的1个小时时间内,积压量呈上升趋势,一路到达50W左右,第二天的图没贴出具体是50W数字,以下是第一天晚上的贴图部分. 现象一: 现象二: ...

  2. Go 面向对象三大特性

    #### Go 中面向对象的三大特性上周因为有一些事情,停更了; 停更的这段时间,花了点时间做了一个小项目(https://github.com/yioMe/node_wx_alipay_person ...

  3. JS基础语法(二)

    目录 JavaScript基础语法(二) 八. 函数 1. 函数的概念 2. 函数的使用 声明函数 调用函数 3. 函数的封装 4. 函数的参数 函数的参数匹配问题 5. 函数返回值 6. argum ...

  4. pycharm下载安装教程

    简介: 首先,PyCharm操作简便,拥有一般IDE具备强大的功能,既适合新手,也可以满足开发人员的专业开发需求,接下来介绍一下如何下载和安装pycharm. ### 一:Pycharm下载 1.首先 ...

  5. Log4j2日志技术总结

    前言 现在流行是SLF4j和Log4j2组合的日志技术,但为了日志技术归类,故前因后果都将做一下介绍. 市场上流行的日志框架 JUL java util logging Java开发团队开发,Jdk原 ...

  6. 揭秘CPU制造全过程

    转载请注明来源:https://www.cnblogs.com/hookjc/ PCPOP 众所周知,CPU是计算机的心脏,包括运算部件和控制部件,是完成各种运算和控制的核心,也是决定计算机性能的最重 ...

  7. 利用系统APP实现导航---By张秀清

    苹果系统本身自带一个地图APP,但是功能并不是很强大,但是一些简单的导航功能还是能做出来的,下面贴上我的代码 // // ViewController.m // 系统APP导航 // // Creat ...

  8. go基础——for语法

    package main import "fmt" /* for循环:某些代码会多次的执行 */ func main() { for i := 1; i <= 3; i++ ...

  9. Nvicat for mysql连接腾讯云数据库TDSQL-C(原CynosDB)

    连接步骤 1.打开腾讯云TDSQL-C(原CynosDB)集群详情中的中的集群连接外网地址,如下图 2.云数据库的账号密码在这里找,第一次不知道密码可以重置密码 3.以root账户为例,打开navic ...

  10. WebGPU 中消失的 FBO 和 RBO

    目录 1 WebGL 中的 FBO 与 RBO 1.1 帧缓冲对象(FramebufferObject) 1.2 颜色附件与深度模板附件的真正载体 1.3 FBO/RBO/WebGLTexture 相 ...