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

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处理数据

})

获得的结构为

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

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

首先清除掉 带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写后台表格思路和赋值用法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui使用templet格式化表格数据的方法

    增加js /*---------------------格式化时间开始--------------------------*/ //对Date的扩展,将 Date 转化为指定格式的String //月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, //年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) //例子: //(new Date()).Format("yyyy-MM-dd hh:mm:ss.S")

  • layui之数据表格--与后台交互获取数据的方法

    jsp或html <table id="userList" lay-filter="userList"></table> js //用户列表 var tableIns = table.render({ elem: '#userList', url : 'userAction_findAll.action', cellMinWidth : 95, page : true, height : "full-125", limit

  • 浅谈layui 数据表格前后台传值的问题

    1.1查询 <script> layui.use('table', function() { var table = layui.table; table.render({ elem : '#demo', url : 'controller路径', { field: 'id', title: 'id'}, { field: 'username', title: '用户名'}, { field: 'sex', title: 性别'}, { field: 'city', title: '城市'}

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

    layui.form 模块用法总结. 基于layui做 表单 赋值 取值 思路 一. 初始一个方法用来给弹窗赋值,一种赋值,是按数据赋值,一种是清空数据 function initContorl (data){ //传数据 赋值为数组 不传数据赋值为空 if(data){ form.val("control",data) }else { form.val("control", { "name1": "", ,"nam

  • 对TensorFlow的assign赋值用法详解

    TensorFlow修改变量值后,需要重新赋值,assign用起来有点小技巧,就是需要需要弄个操作子,运行一下. 下面这么用是不行的 import tensorflow as tf import numpy as np x = tf.Variable(0) init = tf.initialize_all_variables() sess = tf.InteractiveSession() sess.run(init) print(x.eval()) x.assign(1) print(x.ev

  • Python写脚本常用模块OS基础用法详解

    收集了一些关于OS库的用法,整理归纳一下,方便使用 import os # 系统操作 print(os.sep) # 获取当前系统的路径分隔符 print(os.name) # 获取当前使用的工作平台 print(os.getenv('PATH')) # 获取名为 PATH 的环境变量 print(os.getcwd()) # 获取当前的路径 print(os.environ['PATH']) # 可以返回环境相关的信息 不传参时,以字典的方式返回所有环境变量 # 调用系统命令 os.syste

  • Laravel框架Eloquent ORM新增数据、自定义时间戳及批量赋值用法详解

    Laravel框架Eloquent ORM新增数据、自定义时间戳及批量赋值用法详解

    本文实例讲述了Laravel框架Eloquent ORM新增数据.自定义时间戳及批量赋值用法.分享给大家供大家参考,具体如下: 好了,这篇文章我们主要掌握以下几个知识点 通过模型新增数据(涉及到自定义时间戳) 使用模型的Create方法新增数据(涉及到批量赋值) NO.1通过模型新增数据 我的数据库和上篇文章结尾的数据库样式是一致的,那么我要想在这里面输入一个名字叫做ChenChai,年龄是为17岁.要如何操作呢? 代码如下: namespace App\Http\Controllers; us

  • layui表格设计以及数据初始化详解

    开发工具与关键技术: VisualStudio 2015 mvc 数据表格,在mvc项目中很多地方都会见到,一般做mvc项目我们所写的数据表格都不用自己纯敲的,因为纯敲代码量比较大且麻烦,所以我们都是用插件,以下面的为例,这是我写的layui表格设计以及数据初始化. 我们写数据表格之前,需要引用这个layui的插件,引用完后接下来就是,我们需要一个table来装数据,table里面有一些layui插件定义的元素. 如下图所示: 这个插件我们可以模块化使用,我们只用到table这一块,所以我们先需

  • 基于Laravel-admin 后台的自定义页面用法详解

    Laravel-admin 这个后台很好用,几乎省去了html和js的困扰,让后台CURD变得优雅简洁. 这是一个自定义面的Demo 路由定义: $router->get('mails/send', 'MailController@send'); $router->post('mails/send', 'MailController@send'); 控制中写法: public function send(Content $content) { //添加请求 if (request()->

  • layui框架table 数据表格的方法级渲染详解

    如下所示: <table class="layui-table" lay-filter="demo11" id="test11"></table> //js 规范书写 var tst=table.render({ elem: '#test11' ,cols: [[ //标题栏 {checkbox: true} ,{field: 'pay_ct_time', title: '创建时间', width: 80} ,{field

  • Go语言学习之数组的用法详解

    Go语言学习之数组的用法详解

    目录 引言 一.数组的定义 1. 语法 2. 示例 二.数组的初始化 1. 未初始化的数组 2. 使用初始化列表 3. 省略数组长度 4. 指定索引值的方式来初始化 5. 访问数组元素 6. 根据数组长度遍历数组 三. 访问数组元素 1. 访问数组元素 2. 根据数组长度遍历数组 四.冒泡排序 五.多维数组 1. 二维数组 2. 初始化二维数组 3. 访问二维数组 六.向函数传递数组 1. 形参设定数组大小 2. 形参未设定数组大小 3. 示例 总结 引言 数组是相同数据类型的一组数据的集合,数

  • JSP中EL表达式的用法详解(必看篇)

    EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${为起始.以}为结尾的.上述EL范例的意思是:从Session的范围中,取得 用户的性别.假若依照之前JSP Scriptlet的写法如下: User user =(User)session.getAttribute("user"); String sex =user.getSex( );

  • Linux中 sed 和 awk的用法详解

    sed用法: sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法 sed命令行格式为: sed [-nefri] 'command' 输入文本 常用选项: -n∶使用安静(silent)模式.在一般 sed 的用法中,所有来自 STDIN的资料一般都会被列出到萤幕上.但如果加上 -n 参数后,则只有经过sed 特殊处理的那一行(或者动作)才会被列出来. -e∶直接在指令列模式上进行 sed 的

随机推荐