datatable每行中的数据转成json串传给后台,并将json转化为list
程序员文章站
2022-07-15 10:37:46
...
1.前端datatable中的数据
<div class="table-responsive">
<table class="table table-hover" id="adslotRebateTableId">
<thead>
<tr height="89">
<th style="display: none">Id</th>
<th>媒体</th>
<th>频道</th>
<th>广告位</th>
<th>代理返点</th>
<th>客户返点</th>
</tr>
</thead>
<tbody id="adslotRebateTbodyId">
<c:forEach items="${orderItemList}" var="item">
<tr height="89">
<th style="display: none"><c:out value="${item.id}"/></th>
<th><c:out value="${item.mediaName }"/></th>
<th><c:out value="${item.channelType }"/></th>
<th><c:out value="${item.slotName }"/></th>
<th>
<select size="1" style="width:100%;height: 100%;" id="agentRule${item.id}">
<option value="">请选择</option>
<c:forEach items="${allAgentList.get(item.id)}" var="agent">
<option name="agentId" value="${agent.id}"
<c:if test="${item.agentRebateRuleId==agent.id}">
<c:out value="selected"/>
</c:if>
>返点周期:
<fmt:formatDate value="${agent.startDate}" pattern="yyyy-MM-dd"/>--
<fmt:formatDate value="${agent.endDate}" pattern="yyyy-MM-dd"/>
</option>
</c:forEach>
</select>
</th>
<th>
<select size="1" style="width:100%;height: 100%;" id="customerRule${item.id}">
<option value="">请选择</option>
<c:forEach items="${allCustomerList.get(item.id)}" var="customer">
<option name="customerId" value="${customer.id}"
<c:if test="${item.customerRuleId==customer.id}">
<c:out value="selected"/>
</c:if>
>返点周期:
<fmt:formatDate value="${customer.startDate}" pattern="yyyy-MM-dd"/>--
<fmt:formatDate value="${customer.endDate}" pattern="yyyy-MM-dd"/>
</option>
</c:forEach>
</select>
</th>
</tr>
</c:forEach>
</tbody>
</table>
</div>
表格界面如下图:
2.将表格中的每一行所要用的数据转成json串
<script type="text/javascript">
$("#scheduleFormSubmit_2").click(function () {
var tabLen = document.getElementById("adslotRebateTableId");
var jsonT = "[";
for (var i = 1; i < tabLen.rows.length; i++) {
var orderItemId = tabLen.rows[i].cells[0].innerHTML;
// console.log(orderItemId);
var agentRule = $("#agentRule" + orderItemId + " option:selected").val();
// console.log(agentRule);
var customerRule = $("#customerRule" + orderItemId + " option:selected").val();
jsonT += '{"id":' + tabLen.rows[i].cells[0].innerHTML + ',"agentRebateRuleId":"' + agentRule + '","customerRebateRuleId":"' + customerRule + '"},'
}
jsonT = jsonT.substr(0, jsonT.length - 1);
jsonT += "]";
// console.log(jsonT);
$.ajax({
type: 'post',
dataType: 'html',
url: '/td/operation/schedule/updateOrderItemRebate',
data: "json=" + jsonT,
success: function (data) {
// tooltip("保存成功!");
window.location.href = "/td/operation/schedule/index";
},
error: function () {
tooltip("请求数据失败,可能是服务器开小差了");
}
})
})
</script>
最终得到的json串如下:
3.后台接收json并转化为list
public int updateOrderItemRebate(String json) {
JSONArray jsonArr = JSONArray.fromObject(json);
// List<?> list = JSONArray.toList(jsonArr);//参数1为要转换的JSONArray数据,参数2为要转换的目标数据,即List盛装的数据
List<AdOrderItem> rulelist = (List<AdOrderItem>) JSONArray.toCollection(jsonArr, AdOrderItem.class);
if(rulelist.size()!=0){
return adOrderItemMapper.updateOrderItemRule(rulelist);
}
return 0;
}