DB中的Foreach条目：带有Onclick Modal的表格行

Question

对不起，如果标题可能令人困惑，

我正在使用 Laraverl 刀片，我的表中有一个 foreach，以便显示与数据库记录一样多的行。

@foreach ($terminals as $terminal)
                            <tr>
                                <td>{{ $terminal->id }}</td>
                                <td>{{ $terminal->serial }}</td>
                                @if ($terminal->state != 0)
                                    <td><a href="" data-toggle="modal" data-target="#terminalModal--{{ $terminal->id }}">{!! GetTerminalState($terminal->state) !!}</a></td>
                                @else
                                    <td>{!! GetTerminalState($terminal->state) !!}</td>
                                @endif
                                <td>
                                    <a href="{{ route('showSpecificTerminal', $terminal->id) }}" class="btn btn-primary btn-sm">
                                        <i class="fa fa-cc-visa" aria-hidden="true"></i> Terminal Details
                                    </a>
                                </td>
                            </tr>
                            <!-- TODO: Move Modal outside of table?-->
                            @if ($terminal->state != 0)
                                <div class="modal fade" tabindex="-1" role="dialog" id="terminalModal--{{ $terminal->id }}">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title">Terminal (S/N: {{ $terminal->serial }})</h4>
                                            </div>
                                            <div class="modal-body">
                                                <h3 class="text-center">In use by</h3>
                                                <strong>ID: </strong>{{ $terminal->user->id }}<br>
                                                <strong>Username: </strong>{{ $terminal->user->name }}<br>
                                                <strong>Real Name: </strong>{{ $terminal->user->realname }}<br>
                                                <strong>E-Mail: </strong>{{ $terminal->user->email }}<br>
                                                <strong>OID: </strong>{{ $terminal->user->oid }}<br>
                                                <a href="{{ route('showSpecificProfile', $terminal->user->id) }}" class="btn btn-block btn-primary btn-sm">
                                                    <i class="fa fa-user" aria-hidden="true"></i> Profile
                                                </a>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                            </div>
                                        </div><!-- /.modal-content -->
                                    </div><!-- /.modal-dialog -->
                                </div><!-- /.modal -->
                            @endif
                        @endforeach

如您所见，在 ForEach 内部，我使用了自定义函数 GetTerminalState，它与引导标签相呼应（当 $terminal->state 为 0 时为“未使用”，当它不是 0 时为“使用中”） .

当它为 0 零时，它应该生成一个模态，单击标签会打开。在此模式中，我想使用一个表格，但这不起作用（表格中的表格）。

所以我需要将模式移出表格，但以后不想使用另一个 ForEach。另外，有谁知道为每个数据库记录动态生成模态的更好方法？

Answer 1

使用 javascript 生成您的模态框。 监听标签上的点击事件，将 DB 记录 ID 传递给您的 javascript 代码，并对进入模态的数据进行 ajax 调用并呈现它。