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; }