前言
table中每个tr封装成一个对象传于后台存储
一、需求?
用户获取的动态数据在页面渲染,一系列操作后确认无误,将其写入数据库
二、步骤
1.数据渲染
代码如下(示例):
<!--确认保存按钮-->
<button name="button-3" id="button-3" class="btn btn-success" onclick="save()" type="button">
<i class="Hui-iconfont"></i> 保存結果
</button>
<!--动态数据-->
<table class="table table-border table-bordered table-bg table-hover table-sort" id="table">
<thead>
<tr class="text-c">
<th>NO</th>
<th style="display: none">Staff ID</th>
<th>Staff ID</th>
<th>姓名</th>
<th>每月薪金</th>
<th style="display: none">time</th>
<th>加班時間</th>
<th>加班費</th>
<th>病/事假(天數)</th>
<th>病/事假(薪金)</th>
<th>EC MPF</th>
<th>ER MPF</th>
<th>扣MPF後 總收入</th>
<th class="show">編輯</th>
</tr>
</thead>
<tbody>
<tr class="text-c" th:each="staffWageRecord,sta:${staffWageRecordList}" th:object="${staffWageRecord}">
<td name="no" th:value="${sta.index + 1}" th:text="${sta.index + 1}">NO</td>
<td name="staffId" th:value="*{staffId}" style="display: none" th:text="*{staffId}">Staff ID</td>
<td name="staffNo" th:value="*{staffNo}" th:text="*{staffNo}">Staff No</td>
<td name="staffName" th:value="*{staffName}" th:text="*{staffName}">姓名</td>
<td name="wage" th:value="*{wage}" th:text="*{wage}">每月薪金</td>
<td name="time" th:value="*{time}" style="display: none" th:text="*{time}">time</td>
<td name="overtime" th:value="*{overtime}" th:text="*{overtime}">加班時間</td>
<td name="overtimeFee" th:value="*{overtimeFee}" th:text="*{#numbers.formatDecimal(overtimeFee,1,'COMMA',2,'POINT')}" class="text-r">加班費</td>
<td name="vacateDays" th:value="*{vacateDays}" th:text="*{vacateDays}">病/事假(天數)</td>
<td name="vacateFee" th:value="*{vacateFee}" th:text="*{#numbers.formatDecimal(vacateFee,1,'COMMA',2,'POINT')}" class="text-r">病/事假(薪金)</td>
<td name="ecMpf" th:value="*{ecMpf}" th:text="*{#numbers.formatDecimal(ecMpf,1,'COMMA',2,'POINT')}" class="text-r">EC MPF</td>
<td name="erMpf" th:value="*{erMpf}" th:text="*{#numbers.formatDecimal(erMpf,1,'COMMA',2,'POINT')}" class="text-r">ER MPF</td>
<td name="afterMpf" th:value="*{afterMpf}" th:text="*{#numbers.formatDecimal(afterMpf,1,'COMMA',2,'POINT')}" class="text-r">扣MPF後</td>
<td name="edit" th:value="0" class="show">
<a style="text-decoration:none" class="ml-5" th:onclick="'javascript:editStaffVacateMoney(\''+*{staffId}+'\',\'' + *{vacateFee} +'\')'">
<i class="Hui-iconfont"></i>
</a>
</td>
</tr>
</tbody>
</table>
2.数据传递
function save() {
var date = $('#dateShow').val();
var list = new Array();
$("#table").find("tbody").find("tr").each(function () {
var staffWage = {};
$(this).find("td").each(function () {
staffWage[$(this).attr("name")] = $(this).attr("value");
});
list.push(staffWage);
});
var jsonTemp = JSON.stringify(list);
var obj = {
"list" : jsonTemp,
"date" : date
}
$.ajax({
type: "POST",
url: "save-staffWage",
data: obj,
dataType: "json",
//contentType : "application/json;charset=UTF-8",
success: function (data) {
if (data.code == 1) {
layer.msg("保存成功!", {time: 1000});
refresh();
}
},
error: function () {
alert("伺服器出錯,保存失敗!");
}
})
}
总结
将数据封装成json传于后台,转成相应实体.