【原创分享】动态新增行和删除行
[img][/img]由于工作的一个小需求,来写一写这个很小,但是新手朋友可能会有些迷惑的功能
记得刚工作的时候做过一个类似的功能,但是的思路不太记得了,只记得很乱,测出各种bug。
今天来看一下这次的思路,比较适合新手朋友,没有很多的jquery父子级关系
先看一下大概的界面
[img]http://techfoxbbs.com/data/attachment/forum/201508/27/115058rldm9lucvah16wwd.jpg[/img]实现的就是点击新增一行会新增一条空白行,点击删除将这行删除,点击保存将信息保存
校验方面做得比较简单,只是标红不让提交
[img]http://techfoxbbs.com/data/attachment/forum/201508/27/115019ofbjf918t9l819g9.jpg[/img]
1。 先看一下 初始页面的主要代码
[img]http://techfoxbbs.com/data/attachment/forum/201508/27/114933dk3tzoffuv9ztgsg.jpg[/img]
[img]http://techfoxbbs.com/data/attachment/forum/201508/27/115301p4gbb8jdd459gud4.jpg[/img]
是不是很简单,初始化的页面 只有一条单独的空行和两个按钮外加两个隐藏域
这个小功能,唯一的迷惑可能就是增加多条后从中间删除,会造成数据的错乱。
在这里我是这么处理的,记录了一个初始化的max最大值隐藏域,默认给0。然后添加一行将这个值加一,删除不便,这样可以保证生成的动态id唯一且比较好做默认排序的效果。
由于这个需求是在最后新增一行,所以比较简单。 如果有同学要做在特定行下新增,除了id不重复还需要考虑一下排序的问题。
下面就看一下 新增的js代码
[img]http://techfoxbbs.com/data/attachment/forum/201508/27/115916q7ps2hiqhx7qpzsh.jpg[/img]
[img]http://techfoxbbs.com/data/attachment/forum/201508/27/120029kr2di7izz7kpt7hk.jpg[/img]
以上就是新增行和删除特定行的js,是不是很简单。
2。新增保存操作
由于业务需求保存前做了一些校验不详说,只是传递数据
这里其实有很多办法json,列表等等。我是比较懒。自己按自己的规则拼接了字符串来传递,到业务处理的地方再解析取出,仅供大家参考下
先看解析数据的代码,将行的id传递进方法
[img]http://techfoxbbs.com/data/attachment/forum/201508/27/120437z8b4xkvbxuze05xe.jpg[/img]
保存方法没什么好说,有一个不启用的功能在这里处理一下,剩下就是传递数据去后台处理再返回结果
[img]http://techfoxbbs.com/data/attachment/forum/201508/27/120609lm2zsfrfmyy8fffl.jpg[/img]
[img]http://techfoxbbs.com/data/attachment/forum/201508/27/120643kb0wdkmgdvy7mvsn.jpg[/img]
剩下就是后台入库那些啦,很简单对不对,然后就是如果这个功能需要修改的时候 还存在一个回显得功能,来看一下
3。 修改回显操作
其实上面的保存方法已经满足了修改的要求,那么问题只剩下一个就是回显
[img]
http://techfoxbbs.com/data/attachment/forum/201508/27/121245qe7l5wnionylhzt4.jpg[/img]
[img]http://techfoxbbs.com/data/attachment/forum/201508/27/121405a8zg4r4z2i28iodw.jpg[/img]
这里有几点 1。由于是共用的页面,所以在初始化数据之前将span0的原有空行删除
2。新循环生成的新行,id和原来的一样,这样在后台取数据的时候注意下排序
3。由于id是原来保存的,而新打开页面中我们的标记max还是0,所以在数据加载的同时要将max算出,并放回到隐藏域中。
这样这个小功能就基本完成啦。
欢迎大家交流,共同学习,希望给新人一点启示,高手别劈我 哈哈 。
文章为原创 发布在 http://techfoxbbs.com/thread-21638-1-1.html。 也欢迎大家 关注公众号 TechFoxBBS ,一起交流学习
转载 请标明出处
【原创分享】动态新增行和删除行相关推荐
- vue el-table 动态添加行、删除行
项目中有需要动态添加和删除 el-table 行的需要,就学习了下,发现很简单: <template><el-dialogwidth="50%":visible. ...
- 在表格中添加行和删除行
在我们刚接触MVC项目的时候,遇见的表格几乎都是固定的,不可以编辑,也不支持任意添加行和删除行,经常使用的bootstrap的人都知道,目前bootstrap表格都是固定的行数或者是根据数据的数量来决 ...
- python创建变量_Python每天一分钟:给类对象动态新增/删除成员变量和方法(函数)...
一般类对象新增变量或方法的过程 在面向对象(OOP)的编程方法中,如果需要给实例化的类对象新增方法或者属性,一般都是在class类的定义中新增内容,然后才能用类对象来调用新增的方法或变量.如在C++中 ...
- eplan单线原理图多线原理图_【原创分享】西门子PLC电路图高效设计——基于EPLAN与TIA Selection...
电气工程师在利用EPLAN软件进行PLC电路图项目绘制时,需要了解PLC的硬件组态及模块配置后,在EPLAN里建立PLC的模块数据及插入PLC的相关宏进行电气绘图等.相信各位做过相关项目绘图工作的小伙 ...
- ajax点击事件无法触发,解决jQuery Ajax动态新增节点无法触发点击事件的问题_婳祎_前端开发者...
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写οnclick="" ...
- 微信团队原创分享:iOS版微信的内存监控系统技术实践
为什么80%的码农都做不了架构师?>>> 本文来自微信开发团队yangyang的技术分享. 一.前言 FOOM(Foreground Out Of Memory),是指App在 ...
- 微信团队原创分享:Android版微信后台保活实战分享(进程保活篇)
http://www.52im.net/thread-210-1-1.html 哪些部分需要"保活"? 按照我们的理解包含两部分: 网络连接保活: 如何保证消息接收实时性.详见本文 ...
- 龙芯平台python答案_在龙芯平台上自己编写原创应用——“动态壁纸”
原标题:在龙芯平台上自己编写原创应用--"动态壁纸" 一.为何要在龙芯平台上编写"动态壁纸"? 龙芯3A3000桌面电脑的用户越来越多了,人们都想在龙芯电脑上有 ...
- 原创分享 | 如何从非技术层面实现数据驱动
(内容是自己参加行业分享交流会准备的演讲内容,整理成图文做个沉淀~) 大家好,我并不来自于技术部门,要分享的内容也不涉及公司数字化建设的整体规划.所以我不敢保证我讲的内容会有特别宏大的视角,但是我想应 ...
最新文章
- 如何将CSDN文档转换成IPYNB格式的文档?
- DevExpress v17.2新版亮点——CodeRush篇(二)
- ofbiz 分开默认数据库
- 排球计分程序重构(五上篇)
- android google地图点聚合样式修改
- python 迭代器 生成器 区别_Python的生成器和迭代器之间的区别
- c语言实现扫雷小游戏和扫雷源代码
- C#坦克大战流程设计与源代码(1):基本对象类规划
- RGB-D相机(Azure Kinect DK)RGB图、深度图的获取,配准与保存
- K8S kube-proxy iptables 原理分析
- Linux paste合并文件,使用多个字符作为间隔符
- 企业经营发展战略的选择
- CSS设置背景颜色为透明
- Wormhole for mac(在Mac上控制iOS和Android设备)
- 数仓构建维表--行政区域维度表的构建
- 互联网日报 | 2月28日 星期日 | 百世快递回应部分网点倒闭;上汽奥迪明年一季度开始销售;魅族18系列取消附送充电器...
- python excel单元格 剪切清除粘贴复制_Excel复制粘贴时弹出“不能清除剪贴板”的解决方法...
- 用pycharm制做简单的音乐播放
- Android 开源项目PhotoView遇到问题
- Ubuntu进不去图形化界面的解决方案
热门文章
- 第十七章-序列号生成算法分析-Part2
- 联想服务器怎么检测芯片组,探秘联想X86六大实验室:服务器硬件是怎么造出来的...
- 浏览器无法上网:常用DNS推荐
- qq幻想一直连接不到服务器,造梦西游OL连接服务器失败 连接不上网络怎么办
- nginx查看版本及Command not found解决
- 创维电视酷开系统安装第三方软件 如创维电视安装电视家3.0
- MacOS下无法打开软件。原因apple无法检查其是否包含恶意软件。解决办法
- CVPR 2023 | 达摩院REALY头部重建榜单冠军模型HRN解读
- HTML05——行内块级元素_文档流_font属性_盒子模型_练习
- 程序员原码/反码/补码在线计算器