先看效果:
点击保存使用ajax保存当前表数据,返回一个table格式的html,替换掉页面上的table(已添加的教育经历)。
JSP主要代码:
<div class="container" style="width: 100%;">
<div class="row mg15">
<div class="mainbox_C_C">
<div class="setupBox">
<div class="setItems">
<div class="setFold setUnfold" rel="base">
<h2>教育经历</h2>
</div>
<div class="setItemsInfo">
<div id="personal_education" >
<h6 style="color: #191919;font-size: 100%;font-weight: bold;">已添加的教育经历:</h6>
<div id="data-table-education" class="data-table">
<table>
<thead>
<tr>
<th data-property='beginDate'>开始时间</th>
<th data-property='endDate'>结束时间</th>
<th data-property='school'>学校</th>
<th data-property='major'>专业</th>
<th data-property='description'>描述</th>
<th class='data-action'>操作</th>
</tr>
</thead>
<c:forEach items="${educations }" var="eh" varStatus="status">
<tr id="${eh.objectId }">
<td>${fn:substringBefore(eh.beginDate, ' ')}</td>
<td>${fn:substringBefore(eh.endDate, ' ')}</td>
<td>${eh.school }</td>
<td>${eh.major }</td>
<td>${eh.description }</td>
<td>
<a class='action-delete' title='删除' href='${dynamicDomain}/member/deleteTr/1/${eh.objectId }'></a>
<a class='action-update' title='更新' href='#'></a>
</td>
</tr>
</c:forEach>
</table>
</div>
<h6 style="color: #191919;font-size: 100%;font-weight: bold;">教育经历</h6>
<form action="${dynamicDomain}/member/savePersonalEH" method="post" accept-charset="utf-8" class="horizontal-form validator_form" id="personal_education_form">
<div class="a_info_form">
<input type="hidden" id="userId" name="userId" value="${user.objectId }"/>
<div class="input-group" >
<label for="beginDate">开始时间<span>*</span></label>
<div class="inputs">
<input type="text" id="beginDate" name="beginDate" class="a_input_width2" readonly="readonly" onClick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'endDate\')}',readOnly:true})" />
<span class="input-error"><div id="beginDateTip"></div></span>
</div>
</div>
<div class="input-group" >
<label for="endDate">结束时间<span>*</span></label>
<div class="inputs">
<input type="text" id="endDate" name="endDate" class="a_input_width2" readonly="readonly" onClick="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'beginDate\')}',readOnly:true})" />
<span class="input-error"><div id="endDateTip"></div></span>
</div>
</div>
<div class="input-group" >
<label for="school">学校<span>*</span></label>
<div class="inputs">
<input id="school" name="school&