laravel-admin通用后台系统列表页加弹窗

Question

laravel-admin通用后台系统，我现在列表页面多选，然后加一个一键设置，弹出一个弹窗，里面是from表单，对已经勾选的内容进行操作，麻烦做过的指导下，具体如下图

Answer 1

参考免费微信小程序：皆我百晓生 作答，经由专家-皆知整理回复，如问题解决，望采纳；如仍有疑问，请评论回复。

要实现在Laravel Admin中创建一个通用的后台系统列表页，并在列表页上添加一个一键设置功能，当用户多选一些项后，可以弹出一个包含表单的模态框来对选择的项进行批量操作，可以按照以下步骤进行：

1. 创建资源和控制器

确保你已经安装了laravel-admin并创建了相关的资源和控制器。如果还没有，可以通过php artisan admin:make命令创建。

2. 修改视图

在你的资源视图文件（通常位于app/Admin/Views/YourResource/index.blade.php）中，添加多选框和触发模态框的按钮。例如：

<!-- 在你的表格列定义中添加一个checkbox -->
<th>
    <input type="checkbox" id="check-all">
</th>

<!-- 表格行中添加 -->
<td>
    <input type="checkbox" class="check-item" name="selected[]" value="{{ $item->id }}">
</td>

<!-- 添加一个按钮触发模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#batchActionModal">
    一键设置
</button>

<!-- 创建模态框 -->
<div class="modal fade" id="batchActionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">批量操作</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 这里放置你的表单 -->
                <form action="{{ url('/your-resource/batch-action') }}" method="post">
                    @csrf
                    <input type="hidden" name="ids" id="selectedIds">
                    <!-- 其他表单元素 -->
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary">保存更改</button>
            </div>
        </div>
    </div>
</div>

3. 添加JavaScript逻辑

在视图文件底部添加脚本，用于处理多选和提交表单：

<script>
$(function () {
    // 多选框全选逻辑
    $('#check-all').click(function(){
        $('.check-item').prop('checked', $(this).is(':checked'));
    });

    // 当点击一键设置时，收集所有被选中的ID
    $('#batchActionModal').on('show.bs.modal', function (event) {
        var ids = [];
        $('.check-item:checked').each(function() {
            ids.push($(this).val());
        });
        $('#selectedIds').val(ids.join(',')); // 将ID转换为逗号分隔的字符串
    });
});
</script>

4. 后端处理

在你的控制器中，添加一个处理批量操作的方法，例如：

public function batchAction(Request $request)
{
    $ids = explode(',', $request->input('ids'));
    // 对$ids中的每个ID执行你的批量操作
    foreach ($ids as $id) {
        // 执行操作
    }
    return redirect()->back()->with('success', '批量操作成功');
}

以上步骤将帮助你在Laravel Admin中实现一个具有批量操作功能的列表页。记得根据你的具体需求调整代码细节。