jquery操作列表

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>订单状态修改</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<!--<div th:insert="~{index::navigation}"></div>-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left" role="search" method="get" action="/orderModify">
                <div class="form-group">
                    <span><b>订单号</b></span>
                    <input type="text"   class="form-control" name="reqId" placeholder="请输入reqId" style="width: 250px;">
                </div>
                <button type="submit" class="btn btn-default">查询订单状态</button>
            </form>
        </div>
    </div>
</nav>

<div>
<table class="table">
    <tr>
        <td>需求ID:</td>
        <td id="reqId" name="reqId" th:if="${reqOrder!=null}" th:value="${reqOrder.reqId}" th:text="${reqOrder.reqId}"></td>
    </tr>
    <tr>
        <td>当前状态:</td>
        <td th:if="${reqOrder!=null}" th:text="${reqOrder.orderStatus}"></td>
    </tr>
    <tr>
        <td>修改状态:</td>
        <td>
            <select class="form-control reqOrder" id="reqOrderStatusSelect">
            <option id="reqOrderStatus" name="reqOrderStatus" th:value="${corpOrderStatus.getCode()}" th:each="corpOrderStatus:${corpOrderEnum}" th:text="${corpOrderStatus.getCode()}+'('+${corpOrderStatus.getName()}+')'"></option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
         <button type="submit" class="btn btn-primary" id="reqStatusSubmit">提交</button>
        </td>
    </tr>
</table>
</div>

<div style="margin-top: 50px">
    <table class="table" th:if="${suppOrders!=null}">
        <tr>
            <th>订单ID</th>
            <th>订单状态</th>
            <th>修改状态</th>
            <th>操作</th>
        </tr>
        <tr th:each="suppOrder:${suppOrders}">
            <td th:text="${suppOrder.suppOrderId}" id="suppOrderId"></td>
            <td th:text="${suppOrder.orderStatus}" id="orderStatus"></td>
            <td>
                <select class="form-control suppOrder" id="suppOrderStatusSelect">
                    <option id="suppOrderStatus" name="suppOrderStatus" th:value="${suppOrderStatus.getCode()}" th:each="suppOrderStatus:${suppOrderEnum}" th:text="${suppOrderStatus.getCode()}+'('+${suppOrderStatus.getName()}+')'"></option>
                </select>
            </td>
            <td><button type="submit" class="btn btn-primary suppStatus" id="suppStatusSubmit">提交</button></td>
        </tr>
    </table>
</div>
</body>
</html>

  

// $(
window.onload=function () {
    var reqOrderStatus;
    var suppOrderStatus;
    
    // $(".form-control.reqOrder").change(function () {
    //     reqOrderStatus = $(this).val();
    // })

    $("#reqStatusSubmit").click(function () {
        reqOrderStatus=$("#reqOrderStatusSelect option:selected").val();
        if($("#reqId").val()==null){
            alert("订单号不能为空");
            return;
        }
        $.ajax({
            type:'POST',
            url: "/reqOrderModify",
            data:{
                reqId:$("#reqId").html(),
                reqStatus:reqOrderStatus
            },
            success:function (data) {
                alert("成功");
            }
        })

    })

    //修改订单状态
    $(".btn.btn-primary.suppStatus").click(function () {
        var suppOrderId = $(this).parent().parent().find('td').eq(0).html();
        //suppOrderStatus = $(".form-control.suppOrder option:selected").val();
        suppOrderStatus=$(this).parent().parent().find('option:selected').val();
        alert(suppOrderStatus);
        if(suppOrderStatus==null){
            alert("订单状态不能为空");
            return;
        }
        $.ajax({
            type:'POST',
            url: "/suppOrderModify",
            data:{
                suppOrderId:suppOrderId,
                suppOrderStatus:suppOrderStatus
            },
            success:function (data) {
                alert("成功");
            }
        })

    })
}
//)

 

posted @ 2020-12-14 19:52  Mr_sven  阅读(306)  评论(0编辑  收藏  举报