Question

我有一个表，列出了数据库表 order 中的所有数据。每个按钮都有一个按钮，点击它时需要打开一个模态面板，显示与数据库表 orderItem 中该特定订单相关的所有订单商品。我该怎样才能做到这一点？以下是生成模式面板的代码，该面板当前列出了来自 orderItems 的所有记录。我只需要显示与某个订单ID相关联的那些。

<div id="viewOrderItemModal" class="container modal fade modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                        aria-label="close">&times;</button>
                <h3 class="text-center">Order Items</h3>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th >Item</th>
                            <th >Image</th>
                            <th >Size</th>
                            <th >Quantity</th>
                            <th >Total</th>
                            <th >Status</th>
                            <th >

                            </th>
                        </tr>
                        </thead>
                        <tbody id="tableModel">
                        @foreach($orderItems as $orderItem)

                                <tr>
                                    <td>{{$orderItem->item->name}}</td>
                                    <td>
                                        <div class="image">
                                            <a href="{{ asset("/images/items/{$orderItem->item->imagePath}") }}"><img style="width: 50px;height: 50px;"
                                                                                                                        src="{{ asset("/images/items/{$orderItem->item->imagePath}") }}"></a>
                                        </div>
                                    </td>
                                    <td>{{$orderItem->size}}</td>
                                    <td>{{$orderItem->quantity}}</td>
                                    <td style="width: 120px;">Rs. {{$orderItem->subTotal}}.00</td>
                                    <td>{{$orderItem->orderStatus}}</td>
                                    <td>
                                        <a style="margin-bottom: 5px;" onclick="showChangeOrderStatusModal({{$orderItem->id}})" class=" btn btn-success btn-xs">Change Status </a>
                                    </td>

                                </tr>


                        @endforeach


                        </tbody>
                    </table>
                </div>
            </div>
            <div style="padding: 5px;" class="modal-footer">
                <button style="width: 100px" type="submit" class="btn btn-success pull-left btn-sm ">
                    Save Change
                </button>
                <button class="btn" data-dismiss="modal" aria-hidden="true">OK</button>
            </div>
        </div>
    </div>
</div>

表的当前视图

Answer 1

您可以在每个查看订单商品按钮上设置属性，该按钮包含OrderID。因此，在按钮的单击事件上，订单的ID将作为参数发送。然后在服务器端请求中，您将使用参数获取与该OrderID相关的OrderItems。但更好的方法是将用户重定向到另一个页面。

Answer 2

我使用了ajax请求。

例如在jquery中：

添加到View order items按钮的常规链接指向某个API端点/api/order/1/items
在此端点中，您将加载订单，将其传递到模式代码所在的view（您显示的那个）。

// in the /api/order/1/items controller public function items(Order $order) { return view('modals.order.items', compact('order')); // or $items = $order->items }

这将返回一个字符串（查看订单商品的内容）。

所以你需要通过ajax请求加载视图内容并显示模态（Bootstrap 3 with remote Modal）。

或简单的解决方案 - 只需重定向到分离的页面。

使用id加载模式上特定记录的详细信息

2 个答案: