根据选定的表行填充表

时间:2017-11-21 07:58:23

标签: jquery hibernate spring-mvc jpa datatables

当我点击customer表格中的一行时,我试图找到客户的购买的商品

这是我的Inventory实体,其中包含客户购买的quantityamountcustomer idproduct id

public class InventoryEntity {

@Id
@GeneratedValue(strategy = GenerationType.AUTO)
@Column(name = "id")
private int id;

@Column(name = "iQty")
private int iqty;

@Lob
@Column(name = "TransactionDate")
@Temporal(TemporalType.DATE)
private Date transacDate;

@Column(name = "subTotal")
private double subTotal;

@OneToOne
@JoinColumn(name = "Customer_ID")
private CustomerEntity c_inv;

@OneToOne
@JoinColumn(name = "Product_ID")
private ProductEntity p_inv;

public InventoryEntity() {

}

//getters and setters omitted for brevity

public InventoryEntity(int iqty,Date transacDate, double subTotal) {
    super();
    this.iqty = iqty;
    this.transacDate = new Date();
    this.subTotal = subTotal;

    }
}

我的 CustomerEntity

public class CustomerEntity {

@Id
@GeneratedValue(strategy = GenerationType.AUTO)
@Column(name = "cid")
private int cid;

@Column(name = "cName")
private String cName;

@Column(name = "cLname")
private String cLname;

@Column(name = "cEmail")
private String cEmail;

@Column(name = "cAddress")
private String cAddress;

@OneToOne(mappedBy = "c_inv", cascade = CascadeType.ALL, orphanRemoval = true)
private InventoryEntity c_inventory;    

//getters and setters

public CustomerEntity() {

}

public CustomerEntity(String cName, String cLname, String cEmail, String cAddress) {
    super();
    this.cName = cName;
    this.cLname = cLname;
    this.cEmail = cEmail;
    this.cAddress = cAddress;
    }   
}

产品实体     公共类ProductEntity {

@Id
@GeneratedValue(strategy = GenerationType.AUTO)
@Column(name = "pid")
private int pid;

@Column(name = "pName")
private String pName;

@Column(name = "pPrice")
private double price;

@Column(name = "pQty")
private int qty;

@Column(name = "pStatus")
private String status;

/getters,setters and constructors

@OneToOne(mappedBy = "p_inv", cascade = CascadeType.ALL, orphanRemoval = true)
private InventoryEntity p_inventory;
}

客户的html和已购买产品

<div class="container">
        <div class="row">
            <div class="col-lg-12 col-sm-12 col-xs-12">
                <table id="cust" class="table table-hover">
                    <thead class="thead-inverse">
                        <tr>
                            <th>NAME</th>
                            <th>SURNAME</th>
                            <th>EMAIL</th>
                            <th>ADDRESS</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="customer : ${customerTable} ">
                            <td th:text="${customer.cName}"></td>
                            <td th:text="${customer.cLname}"></td>
                            <td th:text="${customer.cEmail}"></td>
                            <td th:text="${customer.cAddress}"></td>
                        </tr>
                    </tbody>
                </table>
            </div>              
        </div>

        <!--  HOW TO POPULATE THIS? WHEN I CLICK A ROW FROM CUSTOMER TABLE?-->
        <label for="purchased_products">PURCHASED PRODUCTS</label>
        <div class="row">
            <div class="col-lg-7 col-sm-7 col-xs-7">
                <table class="table table-striped table-hover">
                    <thead class="thead-inverse">
                        <tr>
                            <th>PRODUCT</th>
                            <th>QUANTITY</th>
                            <th>SUBTOTAL</th>
                            <th>DATE</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="inventory : ${inventoryTable}">
                            <td value="${inventory.p_inv.pName}"></td>
                            <td th:text="${inventory.iqty}"></td>
                            <td th:text="${inventory.subTotal}"></td>
                            <td th:text="${inventory.transacDate}"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row float-right">
            <div class="col-xd-12" >
                <div>
                    <button type="submit" class="btn btn-outline-secondary btn-block">BACK</button>
                </div>
            </div>
        </div>
    </div>

编辑:这就是我到目前为止所做的事情。

$(document).ready(function() {
        var pid;
         var cTable = $('#cust').DataTable( {
            select: {
                style: 'single'
            }
        });



        $('#cust tbody').on('click', 'tr', function() {
            var id = $(this).children("td").map(function() {
                return $(this).text();
            }).get();

            $.ajax({
                type : 'GET',
                url : '/admin/customer/getDetails',
                data : {
                    id : id[0]

                    'pname': id[1]
                    'iqty': id[2]
                    'subTotal': id[3]
                    'transacDate': id[4]

                },
                success : function(r) {
                    alert(r);

                     $("#purchase tbody").append("<tr><td>" + data.pname + "
</td><td>" + data.iqty + "</td><td>" + data.subTotal + "</td><td>" + 
data.transacDate +"</td></tr>");



                }
            });


            pid = id[0];

        });

        $('#purchase').DataTable({
            "processing": true,
            "searching": false,
            "responsive": true,
            "ajax": {
                "url": "/admin/customer/getDetails",
                "type": "GET",
                "data": function (c){
                    c.p_inv = p_inv;
                    c.iqty = iqty;
                    c.subTotal = subTotal;
                    c.transacDate = transacDate;
                } },
                "columns": [{"data": "productn"}, {"data": "productq"}, {"data": "products"}, {"data": "productd"}]
            });
        }
    });

RetrieveProduct.java

@RestController
public class RetrieveProducts {


@Autowired
InventoryRepository iRepo;

@Autowired
CustomerRepository cRepo;

@Autowired
ProductRepository pRepo;



@GetMapping(value="/admin/customer/getDetails")
public InventoryEntity getProduct(@RequestParam(value = "id") Integer id) {
    System.out.println(id);


    InventoryEntity inventoryEntity = iRepo.findOne(id);
    return inventoryEntity;

    }
}

我希望我提供的详细信息足以让我理解。你能帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

我创建了一个RestController来查找清单对象。

@RestController
public class RetrieveProducts {


@Autowired
InventoryRepository iRepo;

@Autowired
CustomerRepository cRepo;

@Autowired
ProductRepository pRepo;

@GetMapping(value="/admin/customer/getDetails")
public InventoryEntity getProduct(@RequestParam(value = "id") Integer id) {

    InventoryEntity inventoryEntity = iRepo.findOne(id);
    return inventoryEntity;

    }
}

查找客户购买产品的javascript:

$(document).ready(function() {
        var pid;
         var cTable = $('#cust').DataTable( {
            select: {
                style: 'single'
            }
        });

        $('#purchase').DataTable();

        $('#cust tbody').on('click', 'tr', function() {
            var id = $(this).children("td").map(function() {
                return $(this).text();
            }).get();

            $.ajax({
                type : 'GET',
                url : '/admin/customer/getDetails',
                dataType : 'json',
                data : {
                    id : id[0]
                },
                success : function(r) {
                    $('table#purchase tbody tr #productName').text(r['p_inventory']['pname']);
                    $('table#purchase tbody tr #qty').text(r['iqty']);
                    $('table#purchase tbody tr #total').text(r['subTotal']);
                    $('table#purchase tbody tr #date').text(r['transacDate']);


                }
            });


            pid = id[0];

        });
    });

我知道我问过一个不好的问题,但这是一个可供参考的答案。