需求分析
说明
- （总的时间为一年）：如图起始日期选择2020-01-28，分期方式为季度（隔三个月缴费一次）。
- 填写总金额，选择起始缴费日期，再选缴费方式，当点击下拉框“季度”选项时，下方表格自动清除全部内容后生成新的数据。
- 如果选择other，会出现“添加行”和“删除全部”两个按钮，点击添加行，会增加一条数据，点击清除行会全部清除
实现技术采用
代码前端
静态部分（去掉部分样式）
- 输入框部分
<div>
<div>
<span><strong>总金额：</strong></span>
<fmt:formatNumber type="number" value="${mainObject.amount}" groupingUsed="false" var="formattedNumber" />
<form:input path="amount" htmlEscape="false" maxlength="21" id="amount" class = "金额样式" value="${formattedNumber}" />
</div>
<div>
<span><strong>起始日期：</strong></span>
<input id="dueDate" name="dueDate" type="text" maxlength="20" class="时间样式"
value="<fmt:formatDate value="${mainObject.dueDate}" pattern="yyyy-MM-dd"/>"
onclick="封装的时间选择器,dateFmt:'yyyy-MM-dd',isShowClear:false});" />
</div>
<div>
<span><strong>缴费方式：</strong></span>
<form:select id="payMethodId" path="payMethod" class="下拉框样式" onchange="getStagingInformation();">
<form:option value="" label="请选择分期方式" /> <%-- 数据库字典方式 --%>
<form:options items="getDictList('payMethod')" itemLabel="label" itemValue="value" htmlEscape="false" />
</form:select>
</div>
</div>
- 表格部分
<table id="contentTable" class="table table-striped table-bordered table-condensed" style="width: 60%;">
<thead>
<tr>
<th>缴费期次</th>
<th>缴费日期</th>
<th>缴费金额</th>
</tr>
</thead>
<tbody id="payplansList"></tbody><%-- 表身此处为空，等待动态添加行 --%>
</table>
动态部分
- 表格动态添加行的JS
<!-- 一行的模板样式 id="payplansListTpl" -->
<script type="text/template" id="payplansListTpl">
<tr id="payplansList{{idx}}">
<td id= "bbb"><%-- 缴费期次 --%>
<input id="payplansList{{idx}}_paytimes" name="bsPolicyPayplansList[{{idx}}].paytimes" type="text"
value="{{row.paytimes}}" maxlength="13" class="numberPos14_2" readonly="true" />
</td>
<td><%-- 缴费日期 --%>
<input id="payplansList{{idx}}_paydate" name="payplansList[{{idx}}].paydate" value="{{row.paydate}}"
pattern="yyyy-MM-dd" maxlength="32" class="时间样式" onclick="选时间" maxlength="32"/>
</td>
<td><%-- 金额 --%>
<input id="bsPolicyPayplansList{{idx}}_preAmount" name="payplansList[{{idx}}].preAmount" type="text"
value="{{row.preAmount}}" maxlength="21" class="金额样式"/>
</td>
</tr>
</script>
<script type="text/javascript">
var payplansListRowIdx = 0, payplansListTpl = $("#payplansListTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
$(document).ready(function() {
var data = ${fns:toJson(main.payplansList)};
for (var i=0; i<data.length; i++){
addRow('#payplansList', payplansListRowIdx, payplansListTpl, data[i]);
payplansListRowIdx = payplansListRowIdx + 1;
}
});
function addRow(list, idx, tpl, row){
$(list).append(Mustache.render(tpl, {
idx: idx, delBtn: true, row: row
}));
}
</script>
- 生成数据（js代码）
<script type="text/javascript">
function getStagingInformation(){
......
var len = $("#payplansList tr").length;
for (var i=0; i<len; i++){
var tr = document.getElementById("bbb").parentNode;
tr.parentNode.removeChild(tr)
payplansListRowIdx--;
}
var numberOfPeriods = $("#payMethodId").val()
if(numberOfPeriods != '05'){
$("#information_action_button").hide();
$.ajax({
type: "POST",
url: '${xxx}/xxx/xxx/getDateByPayMethod',
data:{
payMethod:$("#payMethodId").val(),
dutyDay:$("#dueDate").val()
},
async : false,
dataType: "json",
success: function (data){
var size = data.length - 1
var amount = Number($("#amount").val().replace(/[,]/g,""));
var preAmount=amount/size;
var preAmountTag = 0.00;
for ( k = 0 ; k<size; k++){
addAccRow('#payplansList',payplansListRowIdx, payplansListTpl,payplansListRowIdx = payplansListRowIdx + 1);
var str=$("#payplansList tr:eq("+(payplansListRowIdx-1)+") td:eq(0) input")
.val(payplansListRowIdx);
var dateValue = $("#payplansList tr:eq("+(payplansListRowIdx-1)+") td:eq(1) input").val(data[k]);
if( k != size-1 ){
var preAmount = $("#payplansList tr:eq("+(payplansListRowIdx-1)+") td:eq(2) input")
.val(preAmount.toFixed(2)).formatCurrency();
preAmountTag += parseFloatWithCurrency(preAmount.toFixed(2));
}else{
var preAmountLast = parseFloatWithCurrency(amount - Number(preAmountTag));
}
}
},
error:function () {
}
});
}else if(numberOfPeriods == '05'){
$("#information_action_button").show();
}
}
</script>
- 生成数据（java代码）
@RequestMapping(value = "getDateByPayMethod")
@ResponseBody
public List<String> getDateByPayMethod(String payMethod,String dutyDay) {
List<String> list=new ArrayList<>();
int count = 0;
int type = 0;
if(payMethod.equals("04")) {
count=12;
type=1;
}else if(payMethod.equals("03")) {
count=4;
type=3;
}else if(payMethod.equals("02")) {
count=2;
type=6;
}else if(payMethod.equals("01")) {
count=1;
type=12;
}
DateTimeFormatter fmt = DateTimeFormatter.ofPattern("yyyy-MM-dd");
LocalDate date = LocalDate.parse(dutyDay, fmt);
for(int i=0;i<=count;i++) {
list.add(fmt.format(date.plusMonths(i*type)));
}
return list;
}
- “添加行” 和 “删除全部” 按钮的点击事件
<script>
function onClickPay(){
var len = $("#payplansList tr").length;
var resultsNumRows = Number(len+1);
for (var i=0; i<len; i++){
var tr = document.getElementById("bbb").parentNode;
tr.parentNode.removeChild(tr)
bsPolicyPayplansListRowIdx--;
}
var size = resultsNumRows;
var amount =Number($("#amount").val().replace(/[,]/g,""));
var preAmount = amount/size;
var preAmountTag = 0.00;
for ( k = 0 ; k<size; k++){
addAccRow('#payplansList',payplansListRowIdx, payplansListTpl,payplansListRowIdx = payplansListRowIdx + 1);
var str=$("#payplansList tr:eq("+(payplansListRowIdx-1)+") td:eq(0) input").val(payplansListRowIdx);
if( k != size-1 ){
var preAmount = $("#payplansList tr:eq("+(payplansListRowIdx-1)+") td:eq(2) input")
.val(preAmount.toFixed(2)).formatCurrency();
preAmountTag += parseFloatWithCurrency(preAmount.toFixed(2));
}else{
var preAmountLast = parseFloatWithCurrency(amount - Number(preAmountTag));
}
}
}
function cleanPay(){
var len = $("#payplansList tr").length;
for (var i=0; i<len; i++){
var tr = document.getElementById("bbb").parentNode;
tr.parentNode.removeChild(tr)
payplansListRowIdx--;
}
}
完
