使用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数据表单的编辑的更多相关文章

  1. 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize

    1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...

  2. 修改layui的表单手机、邮箱验证可以为空怎么实现?

      修改layui的表单手机.邮箱验证可以为空   解决办法: 修改源码: 把表单验证源代码(form.js)的正则表达式改一下,例如手机的正则为:/^1d{10}$/,可以改成/^$|^1d{10} ...

  3. layui之表单验证

    这篇文章的表单验证我只是随便记录下,望各位看官理解 1.排序 验证 html代码 <div class="layui-form-item"> <label cla ...

  4. layui父表单获取子表单的值完成修改操作

    最近在做项目时,学着用layui开发后台管理系统. 但在做编辑表单时遇到了一个坑. 点击编辑时会出现一个弹窗. 我们需要从父表单传值给子表单.content是传值给子表单 layer.open({ t ...

  5. layui+tp5表单提交回调

    layui 前段页面form表单提交数据如果监听表单提交 ,tp5后台操作完成后使用 $this->success('success'); 后前端的页面不会出现layui的layer弹窗提示su ...

  6. layui form表单提交

    layui.use(['form'], function () { var form = layui.form; //监听提交 form.on('submit(formDemo)', function ...

  7. layui 自定义表单验证的几个实例

    *注:使用本方法请先引入layui依赖的layu.js和layui.css 1.html <input type="text" name="costbudget&q ...

  8. layui form表单自定义sm格式

    1. 新建以下sm样式,保存为layform_sm.css文件名,然后导入到layui.css的后面. .layui-input-sm,.layui-select-sm,.layui-textarea ...

  9. layui 自定义表单验证 以及提交表单

    订购数量</span> <span style="color: red">*</span>: <input type="text ...

随机推荐

  1. 某法院HP-P4500存储数据恢复案例

    好久没出来写博客了.过春节来了一直非常忙.尤其是近期,忙着做了好几个大单子.先是一个医院50TB的HP-EVA4400,接着是一个法院12TB的HP-P4500,前几天还有做了一个某游乐城12TB的V ...

  2. react 执行 yarn build 页面无法显示

    资源文件路径问题 如果你使用create-react-app创建项目,执行命令 yarn build 后,直接以静态方式打开build文件夹内的index.html,会看到页面显示出现问题,打开con ...

  3. 省市县三级联动js代码

    省市县三级联动菜单,JS全国省市县(区)联动代码,一般可以用于用户注册或分类信息二手交易网站,需要的朋友直接复制代码就可以用了,不过有朋友反馈说缺少某些城市,具体缺少哪个尚不知,请想用的朋友自己补全吧 ...

  4. cocos2dx 2.2.3编译第一个apk到安卓手机

    1.android-ndk-r10(注意32位和64位的别下错了 我不小心下错了 折腾了我两天) 2.adt_201407(eclipse已经跟sdk等等集成在一起了)   3.Cococs2d-x ...

  5. 剑指Offer面试题29(java版):数组中出现次数超过一半的数字

    题目:数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字. 比如输入一个长度为9的数组{1,2,3,2.2,2.5,4,2}.因为数字2在数组中出现5次,超过数组长度的一半,因此输出2. 解 ...

  6. python partial

    1 很好记忆 partial的第一个参数是函数,后面都是该函数的参数. 2 特殊的地方 partial第一个参数是函数名,但是第二个参数是另外一个函数名. 比如partial(filter, func ...

  7. 谈谈C++私有继承

    很多C++程序猿从来没用过私有继承来设计他的类.的确,假设是本该用私有继承的地方却用了公有继承.对程序的功能的实现并无影响. 但这样的误用是一种错位的描写叙述.会引起阅读者的误解,甚至会引起类的使用者 ...

  8. Codeforces Round #311 (Div. 2)C. Arthur and Table

    C. Arthur and Table time limit per test 1 second memory limit per test 256 megabytes input standard ...

  9. codeforces 940F 带修改的莫队

    F. Machine Learning time limit per test 4 seconds memory limit per test 512 megabytes input standard ...

  10. urllib2.urlopen超时未设置导致程序卡死

    没有设置timeout参数,结果在网络环境不好的情况下,时常出现read()方法没有任何反应的问题,程序卡死在read()方法里,搞了大半天,才找到问题,给urlopen加上timeout就ok了,设 ...