【原创分享】动态新增行和删除行

[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 ，一起交流学习
转载 请标明出处