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 相关文章推荐
JS 文件传参及处理技巧分析
May 13 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
js和as的稳定传值问题解决
Jul 14 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
原生JS实现九宫格抽奖
Sep 13 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
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
javascript中怎么做对象的类型判断
2013/11/11 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
js css自定义分页效果
2017/02/24 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
在vue中实现echarts随窗体变化
2020/07/27 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
python实现的登录和操作开心网脚本分享
2014/07/09 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
大学军训自我鉴定
2013/12/15 职场文书
高中军训感言800字
2014/03/05 职场文书
慰问信模板
2015/02/14 职场文书
求职自荐信怎么写
2015/03/04 职场文书
人事聘任通知
2015/04/21 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL