对于前端开发，我的归类是分2种层次，首先第一种是基于前端架构上的开发，有一些后台开发的同事会瞧不起搞前端的，他们认为前端无非是画个页面嘛，这就有点夜郎自大了。现在我了解的一些前端框架基本分为3个主流框架:ReactJs,Vue,angularjs,前两个还是目前的主流趋势。第二种就是基于市面上的一些非主流工具包，比如BUI，FLatUI等，再结合自己的dom操作。
好了，废话不多说了，本篇文章主要讲怎么去实现表单动态加减的效果，花了一天时间搞出来，特来分享一下。本文主要分为两部分： 一是页面表单动态加减实现，二是复杂表单项提交到controller层。
一、表单动态加减的实现
1.页面效果如下，第一个新增按钮增加的是，费用类型1和资金账户名称横向两栏这块，就称为Div块吧，第二个新增按钮增加的是，资金账户名称横向一栏，称为sonDiv块吧。第二个费用类型1和以下是新增出来的，所以显示是删除按钮，同样第二个资金账户名称也是新增出来的，所以也显示删除按钮。
2.代码片段，html部分如下（用的BUI）
<div> <div> <form action="" method="get"> <div> <div> <label><s>*</s>产品名称</label> <div> <select{required:'产品名称'}" data-rules="{required:true}" > <option value="">请选择</option> <option value="大毛贷">大毛贷</option> <option value="老子贷">老子贷</option> </select> </div> </div> <div> <label><s>*</s>子产品名称</label> <div> <select{required:'子产品名称'}" data-rules="{required:true}" > <option value="">请选择</option> <option value="小毛贷">小毛贷</option> <option value="小子贷">小子贷</option> </select> </div> </div> </div> <div> <hr/> </div> <div> <div> <div> <label><s>*</s>费用类型1</label> <div> <select{required:'费用类型1'}" data-rules="{required:true}" > <option value="">请选择</option> <option value="放款">放款</option> <option value="保费">保费</option> </select> </div> </div> <input type="button" value="新增"> </div> <div> <div> <label><s>*</s>资金账户名称</label> <div> <select{required:'资金账户名称'}" data-rules="{required:true}" > <option value="">请选择</option> <option value="XX保证金">XX保证金</option> <option value="XX储备金">XX储备金</option> </select> </div> </div> <div> <label><s>*</s>方向</label> <div> <select{required:'方向'}" data-rules="{required:true}" > <option value="">请选择</option> <option value="调增">调增</option> <option value="调减">调减</option> </select> </div> </div> <div> <label><s>*</s>交易类型</label> <div> <select{required:'交易类型'}" data-rules="{required:true}" > <option value="">请选择</option> <option value="提现">提现</option> <option value="保证金缴保费">保证金缴保费</option> </select> </div> </div> <button type="button">新增</button> </div> </div> </form> </div> <div> <div> <button type="button">提交</button> <button type="button"><span>返回</span></button> </div> </div> </div>
JS代码部分：
//div1模块添加 $('#div1BtnAdd').on('click', function() { var div1 = $('#div1').clone(true); // div1.find("input[id='div1BtnAdd']").attr("value","删除"); // div1.find("input[id='div1BtnAdd']").attr("onclick","deleteParent($(this))"); // div1.find("input[id='div1BtnAdd']").removeAttr("id"); div1.find("input[id='div1BtnAdd']").replaceWith('<input type="button" value="删除" >'); div1.appendTo('#J_Form'); }); //div1子模块行添加 function addSubDiv1(obj){ var subDiv1 = $('#subDiv1').clone(true); subDiv1.find("button[id='subDiv1BtnAdd']").remove(); subDiv1.append('<input type="button" value="删除" >').appendTo(obj.parents('#subDiv1').parents('#div1')); } //div1子模块行添加 /** $('#subDiv1BtnAdd').on('click', function() { var subDiv1 = $('#subDiv1').clone(true); subDiv1.find("button[id='subDiv1BtnAdd']").remove() subDiv1.append('<input type="button" value="删除" >').appendTo('#div1'); }); */ function deleteDiv1(obj){ obj.parents('#div1').remove(); } function deleteSubDiv1(obj){ obj.parents('#subDiv1').remove(); }
页面展示部分效果基本完成，其中有部分代码注释的，那是我调试的代码，可以忽略，虽然不对，但可以作为纠错参考，可以想想为啥不对。
二、复杂表单项提交到controller
接着上面，页面展示好了，后面要做的就是把表单内容提交到后台，后台我用的是springMvc接收的，直接看代码吧
JS部分：