【原创分享】动态新增行和删除行
来源:互联网 发布:若风淘宝店服装店网址 编辑:程序博客网 时间:2024/04/28 15:57
由于工作的一个小需求,来写一写这个很小,但是新手朋友可能会有些迷惑的功能
记得刚工作的时候做过一个类似的功能,但是的思路不太记得了,只记得很乱,测出各种bug。
今天来看一下这次的思路,比较适合新手朋友,没有很多的jquery父子级关系
先看一下大概的界面
实现的就是点击新增一行会新增一条空白行,点击删除将这行删除,点击保存将信息保存
校验方面做得比较简单,只是标红不让提交
1。 先看一下 初始页面的主要代码
是不是很简单,初始化的页面 只有一条单独的空行和两个按钮外加两个隐藏域
这个小功能,唯一的迷惑可能就是增加多条后从中间删除,会造成数据的错乱。
在这里我是这么处理的,记录了一个初始化的max最大值隐藏域,默认给0。然后添加一行将这个值加一,删除不便,这样可以保证生成的动态id唯一且比较好做默认排序的效果。
由于这个需求是在最后新增一行,所以比较简单。 如果有同学要做在特定行下新增,除了id不重复还需要考虑一下排序的问题。
下面就看一下 新增的js代码
以上就是新增行和删除特定行的js,是不是很简单。
2。新增保存操作
由于业务需求保存前做了一些校验不详说,只是传递数据
这里其实有很多办法json,列表等等。我是比较懒。自己按自己的规则拼接了字符串来传递,到业务处理的地方再解析取出,仅供大家参考下
先看解析数据的代码,将行的id传递进方法
保存方法没什么好说,有一个不启用的功能在这里处理一下,剩下就是传递数据去后台处理再返回结果
剩下就是后台入库那些啦,很简单对不对,然后就是如果这个功能需要修改的时候 还存在一个回显得功能,来看一下
3。 修改回显操作
其实上面的保存方法已经满足了修改的要求,那么问题只剩下一个就是回显
这里有几点 1。由于是共用的页面,所以在初始化数据之前将span0的原有空行删除
2。新循环生成的新行,id和原来的一样,这样在后台取数据的时候注意下排序
3。由于id是原来保存的,而新打开页面中我们的标记max还是0,所以在数据加载的同时要将max算出,并放回到隐藏域中。
这样这个小功能就基本完成啦。
欢迎大家交流,共同学习,希望给新人一点启示,高手别劈我 哈哈 。
文章为原创 发布在 http://techfoxbbs.com/thread-21638-1-1.html。 也欢迎大家 关注公众号 TechFoxBBS ,一起交流学习
转载 请标明出处
记得刚工作的时候做过一个类似的功能,但是的思路不太记得了,只记得很乱,测出各种bug。
今天来看一下这次的思路,比较适合新手朋友,没有很多的jquery父子级关系
先看一下大概的界面
实现的就是点击新增一行会新增一条空白行,点击删除将这行删除,点击保存将信息保存
校验方面做得比较简单,只是标红不让提交
1。 先看一下 初始页面的主要代码
是不是很简单,初始化的页面 只有一条单独的空行和两个按钮外加两个隐藏域
这个小功能,唯一的迷惑可能就是增加多条后从中间删除,会造成数据的错乱。
在这里我是这么处理的,记录了一个初始化的max最大值隐藏域,默认给0。然后添加一行将这个值加一,删除不便,这样可以保证生成的动态id唯一且比较好做默认排序的效果。
由于这个需求是在最后新增一行,所以比较简单。 如果有同学要做在特定行下新增,除了id不重复还需要考虑一下排序的问题。
下面就看一下 新增的js代码
以上就是新增行和删除特定行的js,是不是很简单。
2。新增保存操作
由于业务需求保存前做了一些校验不详说,只是传递数据
这里其实有很多办法json,列表等等。我是比较懒。自己按自己的规则拼接了字符串来传递,到业务处理的地方再解析取出,仅供大家参考下
先看解析数据的代码,将行的id传递进方法
保存方法没什么好说,有一个不启用的功能在这里处理一下,剩下就是传递数据去后台处理再返回结果
剩下就是后台入库那些啦,很简单对不对,然后就是如果这个功能需要修改的时候 还存在一个回显得功能,来看一下
3。 修改回显操作
其实上面的保存方法已经满足了修改的要求,那么问题只剩下一个就是回显
这里有几点 1。由于是共用的页面,所以在初始化数据之前将span0的原有空行删除
2。新循环生成的新行,id和原来的一样,这样在后台取数据的时候注意下排序
3。由于id是原来保存的,而新打开页面中我们的标记max还是0,所以在数据加载的同时要将max算出,并放回到隐藏域中。
这样这个小功能就基本完成啦。
欢迎大家交流,共同学习,希望给新人一点启示,高手别劈我 哈哈 。
文章为原创 发布在 http://techfoxbbs.com/thread-21638-1-1.html。 也欢迎大家 关注公众号 TechFoxBBS ,一起交流学习
转载 请标明出处
0 0
- 【原创分享】动态新增行和删除行
- javascript 动态创建表格:新增、删除行和单元格
- javascript 动态创建表格:新增、删除行和单元格
- 动态创建表格:新增、删除行和单元格
- JavaScript 动态创建表格:新增、删除行和单元格
- javascript动态创建表格:新增、删除行和列
- javascript动态创建表格:新增、删除行和列
- javascript 动态创建表格:新增、删除行和单元格
- javascript 动态创建表格:新增、删除行和单元格
- jq运用append和remove实现动态新增删除行
- js动态新增/删除table表的行和列
- jquery动态新增行、删除行
- js 动态新增、删除行 添加事件
- JS动态新增删除table中的行
- javascript动态操作表格:新增、设置样式、删除、移动行
- jquey实现的动态表格的新增及删除行
- 点击新增或删除按钮实现GridView动态增减行
- GridView动态新增行 删除行 适合多数据批量修改保存 新增数据验证
- 集合框架的线程安全类
- 很好的一篇设置Eclipse的文章
- oepnwrt中文开发手册
- 64位linux系统下编译int32_t
- GDSOI2008鱼肉炸弹
- 【原创分享】动态新增行和删除行
- bash 脚本笔记
- 慕课网视频下载方法
- Spring任务调度实战之Timer
- mysql 中key 指的是索引
- 我哥说的是对的
- Java计算工作小时数的方法(修正版)
- Java 分支结构
- 算法研究之快速排序java版