LayUI使用注意
# 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使用注意的更多相关文章
- layui常用方法
很好用的一个ui组件,弹出,分页等 http://layer.layui.com/ 1 带叉叉的弹窗 layer.open({ type: , title: false, //不显示标题 conten ...
- 开源网站.NETMVC+ Layui+SqlSugar+RestSharp
SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...
- 分页组件 - layui.laypage
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 日期时间组件 - layui.laydate
全部参数 一.核心方法:laydate(options); options是一个对象,它包含了以下key: '默认值' { elem: '#id', //需显示日期的元素选择器 event: 'cli ...
- 关于layui
之前用layer用了很长时间,感觉很好用,最近看到了layui的发布很想尝试尝试. 加入了挺多的功能,比如编辑器,上传,form表单等等.
- 日期控件,layui
<link rel="stylesheet" href="<%=path%>/layui/css/layui.css" type=" ...
- 使用的组件:Layui
Layui 经典模块化前端框架 由职业前端倾情打造,面向所有层次的前后端程序猿,中国最容易使用的前端UI解决方案 Layui 出蛋于2016年金秋,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又 ...
- 【开源项目SugarSite】ASP.NET MVC+ Layui+ SqlSugar+RestSharp项目讲解
SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...
- 前端框架layui
可以了解下jQuery组件layer layui开始使用Layui兼容除IE6/7以外的全部浏览器,并且绝大多数结构支持响应式 弹出层如果你使用的是Layui,那么你直接在官网下载layui框架即可, ...
- Layui - 示例
示例地址 http://www.layui.com/demo/ 下载地址 http://www.layui.com/ 示例代码 <!doctype html> <html> & ...
随机推荐
- 集合框架-Map集合-LinkedHashMap及关联源码操作
1 package cn.itcast.p9.linkedhashmap.demo; 2 3 import java.util.HashMap; 4 import java.util.Iterator ...
- 【程序6】用*号输出字母C的图案
我自己写的 print(' * * *\n'); print(' * \n'); print(' * \n'); print(' * * * *\n'); 官方答案 print('*' * 10) f ...
- linux中uniq命令全面解析
目录 一 :uniq作用 二:uniq格式 1.参数 2.参数案例解析: linuxuniq简介 Linux uniq 命令用于检查及删除文本文件中重复出现的行列,一般与 sort 命令结合使用. u ...
- python15day
昨日回顾 装饰器:完美的呈现了开放封闭原则.本质:闭包. def wrapper(f): def inner(*args,**kwargs): '''在执行被装饰函数之前,想写什么代码写什么代码''' ...
- PyTorch 介绍 | TRANSFORMS
数据并不总是满足机器学习算法所需的格式.我们使用transform对数据进行一些操作,使得其能适用于训练. 所有的TorchVision数据集都有两个参数,用以接受包含transform逻辑的可调用项 ...
- Zookeeper 源码解析-环境准备
为了深入学习Zookeeper,准备把zookeeper源码导入eclipse中学习 一.Ant环境准备 因为我自己用的是Mac,直接输入命令:brew install ant即可 如果是window ...
- ApacheCN Linux 译文集(二) 20211206 更新
CentOS7 Linux 服务器秘籍 零.前言 一.安装 CentOS 二.配置系统 三.管理系统 四.用 YUM 管理包 五.管理文件系统 六.提供安全性 七.构建网络 八.使用文件传输协议 九. ...
- 「JOI 2014 Final」裁剪线
做法一 首先将边界也视作四条裁剪线,整个平面作为一张纸,视存在 \(y = -\infty, y = +\infty, x = -\infty, x = +\infty\) 四条直线. 按照纵坐标依次 ...
- AQS源码一窥-JUC系列
AQS源码一窥 考虑到AQS的代码量较大,涉及信息量也较多,计划是先使用较常用的ReentrantLock使用代码对AQS源码进行一个分析,一窥内部实现,然后再全面分析完AQS,最后把以它为基础的同步 ...
- httpclient源码分析之 PoolingHttpClientConnectionManager 获取连接 (转)
PoolingHttpClientConnectionManager是一个HttpClientConnection的连接池,可以为多线程提供并发请求服务.主要作用就是分配连接,回收连接等.同一个rou ...