Layui数据表单的编辑
使用layui对单元格进行编辑并保存
先是要引入layui的JS和CSS
然后创建一个表格
而重要的是edit这个属性,只有使用了这个属性的一列数据表格才可以编辑,其余的都不可以进行编辑
然后使用layui的监听事件获取到数据
再声明1个全局变量用于装所在行的相关数据,当然我们需要的并不是所有的数据,而是加了edit这个属性的那一条数据,
var data =obj.data
var commodityName=data.CommodityName
1
2
3
obj是控制器返回给页面的值
commodityName是便于数据的使用
这样我们就能获取到修改后的数据了
我们只要CommodityName这个数据
再使用Post或者ajaxSubmit请求,传递将修改后数据给控制器,并保存
而保存的大概思路和一般的模态框保存基本相同
第一步先判断数据库是否有了相同的数据,如果有则返回false不进行保存
如果第一步判断成功后,就将查询要修改的数据,并将其状态改为修改
dbUser是查询出来的数据的一个集合名称
并将修改后的数据赋值给查询的这张表
然后返回数据给页面
这样一次只能保存一行数据
如果需要保存多行数据,就得每修改一次单元格就保存一次
而没有加上edit这个属性的列,是无法点击编辑
如果需要修改的数据较少,那么layui的数据表格编辑是一个很不错的方法
注意:
如果只是给表头加上edit属性,不写监听事件的话,一样是无法点击表格进行编辑,所以使用时一定要注意。
在查询数据是一定要记得去掉数据中的空格,防止保存数据时出错
那么一个简单的数据单元格的编辑就完成了
---------------------
Layui数据表单的编辑的更多相关文章
- 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize
1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...
- 修改layui的表单手机、邮箱验证可以为空怎么实现?
修改layui的表单手机.邮箱验证可以为空 解决办法: 修改源码: 把表单验证源代码(form.js)的正则表达式改一下,例如手机的正则为:/^1d{10}$/,可以改成/^$|^1d{10} ...
- layui之表单验证
这篇文章的表单验证我只是随便记录下,望各位看官理解 1.排序 验证 html代码 <div class="layui-form-item"> <label cla ...
- layui父表单获取子表单的值完成修改操作
最近在做项目时,学着用layui开发后台管理系统. 但在做编辑表单时遇到了一个坑. 点击编辑时会出现一个弹窗. 我们需要从父表单传值给子表单.content是传值给子表单 layer.open({ t ...
- layui+tp5表单提交回调
layui 前段页面form表单提交数据如果监听表单提交 ,tp5后台操作完成后使用 $this->success('success'); 后前端的页面不会出现layui的layer弹窗提示su ...
- layui form表单提交
layui.use(['form'], function () { var form = layui.form; //监听提交 form.on('submit(formDemo)', function ...
- layui 自定义表单验证的几个实例
*注:使用本方法请先引入layui依赖的layu.js和layui.css 1.html <input type="text" name="costbudget&q ...
- layui form表单自定义sm格式
1. 新建以下sm样式,保存为layform_sm.css文件名,然后导入到layui.css的后面. .layui-input-sm,.layui-select-sm,.layui-textarea ...
- layui 自定义表单验证 以及提交表单
订购数量</span> <span style="color: red">*</span>: <input type="text ...
随机推荐
- 字节序:Big Endian 和 Little Endian
一.字节序 字节序,也就是字节的顺序,指的是多字节的数据在内存中的存放顺序. 在几乎所有的机器上,多字节对象都被存储为连续的字节序列.例如:如果C/C++中的一个int型变量 a 的起始地址是& ...
- nginx-1.5.10 之mips编译到RT5350
编译nginx-1.5.10一般须要下面库的支持:pcre,zlib,openssl 此次编译nginx-1.5.10使用的库版本号分别为pcre-8.34:openssl-1.0.0l:zlib-1 ...
- VMWare中的Host-only、NAT、Bridge的比較
VMWare有Host-only(主机模式).NAT(网络地址转换模式)和Bridged(桥接模式)三种工作模式. 1.bridged(桥接模式) 在这样的模式下.VMWare虚拟出来的操作系统就像是 ...
- django 数据库连接模块解析及简单长连接改造
django 数据库连接模块解析及简单长连接改造工作中纯服务端的项目用到了线程池和django的ORM部分.django 的数据库连接在每一个线程中开启一份,并在查询完毕后自动关闭连接. 线程池处理任 ...
- Helios Service Release 2安装SVN
Eclipse Helios Service Release 2安装SVN地址:subclipse http://subclipse.tigris.org/update_1.6.x 1.使用方式:he ...
- Thinkphp模板标签if和eq的区别和比较
在TP模板语言中.if和eq都可以用于变量的比较.总结以下几点: 1.两个变量的比较: <if condition=”$item.group_id eq $one.group_id”> & ...
- bzoj 1782: [Usaco2010 Feb]slowdown 慢慢游【dfs序+线段树】
考虑每头牛到达之后的影响,u到达之后,从1到其子树内的点需要放慢的都多了一个,p为u子树内点的牛ans会加1 用线段树维护dfs序,每次修改子树区间,答案直接单点查询p即可 #include<i ...
- 1617: [Usaco2008 Mar]River Crossing渡河问题(dp)
1617: [Usaco2008 Mar]River Crossing渡河问题 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1219 Solved: ...
- 洛谷 P1582 倒水
题目描述 一天,CC买了N个容量可以认为是无限大的瓶子,开始时每个瓶子里有1升水.接着~~CC发现瓶子实在太多了,于是他决定保留不超过K个瓶子.每次他选择两个当前含水量相同的瓶子,把一个瓶子的水全部倒 ...
- fread/fwrite实现复制功能
1. fread/fwrite实现复制功能 #include <stdio.h> #include <stdlib.h> #define BUFFSIZE 4096 //执行 ...