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 ...
随机推荐
- myEclipse怎样将程序部署到tomcat(附录MyEclipse调试快捷键)
部署 1.选中你要部署的项目,在工具栏找到 Deploy MyEclipse J2EE Project to Server 2.单击Add,即出现例如以下界面.选择对应的Server,要和你在配置to ...
- 我和nupt集训队的故事
纯水文,如有不适请ctrl+w撤离 亚洲赛刚结束.看了不少巨巨的退役贴以及岛娘在知乎上的那篇感天动地的人生经历.多少有点夜深忽梦少年事的错觉.作为一个两年前就打出gg的高龄选手,之后又强行以1次队员和 ...
- [Python] How to unpack and pack collection in Python?
It is a pity that i can not add the video here. As a result, i offer the link as below: How to unpa ...
- 《炉石传说》架构设计赏析(4):Asset管理
欢迎转载,请注明作者[燕良@游戏开发]及原文地址:http://blog.csdn.net/neil3d/article/details/39580197 另外.欢迎大家来我的QQ群交流各种游戏引擎相 ...
- 【Android】自己定义View
翻译自:http://developer.android.com/training/custom-views/index.html 一)创建view类 一个设计良好的自己定义view与其它的类一样.它 ...
- [计算机故障]华为手机无法连接XP系统(inf中找不到所需的段落)
同事新买的华为手机麦芒C199,拍了些照片.结果连接电脑,没有反应. 后经打电话到华为,可以到华为官网下驱动. 地址如下: http://consumer.huawei.com/cn/support/ ...
- 网络学习笔记:TCP/IP连网和Internet
1.网关 由硬件和软件组成,实现不同网段间的数据传送. 常用路由器充当网关. 网关通常维护一份路由表,但只有少量的编址信息.它用这些信息把数据转发到知道更多信息的网关. 组成互联网骨干的网关称为核心网 ...
- mysql对表列数和行大小的限制
mysql对表列数和行大小的限制 - CSDN博客 https://blog.csdn.net/Dr_Joseph/article/details/78111312
- go13---反射reflection
package main /** 反射reflection 反射可大大提高程序的灵活性,使得 interface{} 有更大的发挥余地 反射使用 TypeOf 和 ValueOf 函数从接口中获取目标 ...
- tflearn 保存模型重新训练
from:https://stackoverflow.com/questions/41616292/how-to-load-and-retrain-tflean-model This is to cr ...