layui写后台表格思路和赋值用法详解


Posted in Javascript onNovember 14, 2019

layui.form 模块用法总结。

基于layui做 表单 赋值 取值

思路

一. 初始一个方法用来给弹窗赋值,一种赋值,是按数据赋值,一种是清空数据

function initContorl (data){   //传数据 赋值为数组 不传数据赋值为空
 if(data){
 form.val("control",data)
 }else {
 form.val("control",
 {
  "name1": "",
  ,"name2": "",
 ,"name3":""
 })
 }

* layui 中form.val();方法form.val("control") 中的control为 <form> 标签中的 lay-filter 值, name1,name2,name2为 input的name属性值,我一般和id设为同一个

*赋值

1. <input type="text" name="name"> name val

2 <select name="name"></select> name val

3 <input type="radio" name="name"> name val

4 <textarea name="desc"></textarea> name val

5 开关 <input type="checkbox" name="off_on" lay-skin="switch" lay-text="开启|关闭"> name val(true/fasle)

6 多选这里比较搞人 layui 要设置不同的名字然后将对应的 name 设置为true 而后台需要的是 name:vule 的json格式.

具体做法为:写成 <input type="checkbox" name="subject[GS024]" value="GS024" title="生命安全"> subject为传给后端的

name值,赋值 intdata["subject["+el.st_grade+"]"] = true; intdata 传给 initContorl (data) 的data参数.

所以多选赋值: name[vlue] val(true/fasle);

*清空 不传data initContorl就是清空

1-5 自己设 6 设置为 $("input:checkbox").attr("checked",false);使用过后要更新下表单状态 form.render('checkbox');

二 获取表单数据;

layui 是在监听表单提交的时候 获取表格值 表单提交按钮结构 <button lay-submit lay-filter="*">提交</button

监听方法

form.on('submit(filter值)', function(data){

 data.field //即 为获取的表格值;

 return false;//阻止表单提交采用jaxa处理数据

})

获得的结构为

layui写后台表格思路和赋值用法详解

注意这里多选的格式并不是我们想要的格式;多选的取值不能用

于是这里用另外一个方式获取

首先清除掉 带dx的项

var getData = data.field;

for( key in getData){
  var myReg = /dx/;
  if ( myReg.test(key)){
   delete getData[key];
  }
  }

然后给他赋值正确的格式

var arry = [];

$("input:checkbox[name^='grade']:checked").each(function(i){
  arry[i] = $(this).val();
 });

getData.dx = arry;

三、到这里完成 表单的赋值 取值,用layui很简单。 做表格 增删改查 这个模块必不可少

以上这篇layui写后台表格思路和赋值用法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
7个jQuery最佳实践
Jan 12 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 #Javascript
layui 弹出层值回传解决方式
Nov 14 #Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 #Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 #Javascript
浅析Vue 防抖与节流的使用
Nov 14 #Javascript
微信小程序tabBar设置实例解析
Nov 14 #Javascript
layui清除radio的选中状态实例
Nov 14 #Javascript
You might like
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
PHP反射实际应用示例
2019/04/03 PHP
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
python实现dict版图遍历示例
2014/02/19 Python
Python functools模块学习总结
2015/05/09 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
python 实现端口扫描工具
2020/12/18 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
如何编写python的daemon程序
2021/01/07 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
食品安全汇报材料
2014/08/18 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android