动态逐条新增编辑删除记录

一、需求分析

在同一页面下，用户逐行添加记录，同时满足动态修改、删除。

比如，填写回款计划，一个计划包括回款时间、比例等是一个记录，逐一添加、删除：

二、实现方法

1.前端

html代码，其中用了模板语言velocity。表格标题用html画出，循环从后台取来的实体列表$rm，这是进入页面读取的用户已经填写过的记录，注意记录的caozuoId，此处读取出来的记录为“update”，另外还有隐藏域绑定记录的Id：



需要额外注意的是在表单里一个重要的隐藏域lineNum，此携带着记录的个数信息：

#if($!rm)
<input type="hidden" name="lineNum"  value="$!{rm.size()}" id="lineNum"/>
#else
<input type="hidden" name="lineNum"  value="1" id="lineNum"/>
#end

“增加”方法AddRecord用jquery实现，每增加一条将记录个数加一；新增记录的操作Id就是“add”：



“删除”方法deltr用jquery实现。删除分情况讨论：是新增的记录还是修改的。照样需要及时修改lineNum记录数。如果删除的是新增的记录，直接取下一行记录的值往上一行放，最后删除最末一行的记录。如果删除的是修改模式下的记录，直接将其隐藏，然后操作Id设为“del”，将在后台获取到该记录然后在数据库将其处理了。注意隐藏时不操作lineNum，这也不会影响在编辑模式下再新增删除记录：

2.后端

新增模式下后台方法。根据lineNum在后台循环取出变量值，继而保存入库：



编辑模式下修改删除记录时方法。根据操作Id判断是更新还是要删除：

三、总结

这是开发中很平常的一个缩影，前后台传值，传什么值，循环判断实现各种各样的需求。这就有了一个值得探讨的问题，在这些开发环境和条件下，能实现出哪些花样，有哪些性质，有没有不借助外力就不能实现的？

第一篇就暂时写到这，以后继续分析。