欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>

表格界面如下图:

datatable每行中的数据转成json串传给后台,并将json转化为list

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串如下:

datatable每行中的数据转成json串传给后台,并将json转化为list

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