php - DB : Table row with Onclick Modal with a row 中的 Foreach 条目

Question

抱歉，如果标题可能令人困惑，

我正在使用 Laraverl Blade，并且我的表中有一个 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 来回显 Bootstrap 标签(当 $terminal->state 为“未使用”时0，非 0 时显示“正在使用”)。

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

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

Answer 1

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