YII2前端联动批量删除需实现复选框绑定、AJAX提交与界面同步：GridView设唯一id，CheckboxColumn的name必须为'id'；按钮用JS获取getSelectedRows()返回ID数组；成功后Pjax刷新或提示结果，失败时展示错误信息。
YII2 中实现前端联动的批量删除，核心是让 GridView 的复选框选择、按钮点击、AJAX 提交和页面刷新（或局部更新）形成闭环。不是只“能删”，而是用户操作有反馈、数据删得准、界面状态同步。
复选框与 GridView ID 必须绑定一致
GridView 必须设置唯一 id，且 CheckboxColumn 的 name 要明确指向主键字段名（通常是 id），否则 JS 拿不到选中值：
-
'options' => ['id' => 'grid-order']—— 给整个表格容器加 ID -
['class' => 'yii\grid\CheckboxColumn', 'name' => 'id']—— 让每个复选框的 name 是id[]，提交时自动组成数组 - 不设
name或设错（如name' => 'order_id'），getSelectedRows()就会返回空数组
按钮触发需用 jQuery 绑定并获取选中 ID
批量删除按钮不能直接跳转链接，要用 JS 获取当前选中的行 ID 列表，再发 AJAX 请求：
Frontend Design Pro — 专业前端设计规范
下载
前端设计质量提升 skill。让 AI 生成的 UI/前端代码更专业，避免常见设计反模式。 参考 impeccable 项目的设计语言规范，提供 audit/polish/critique 等设计审查命令。 触发词：/audit /polish /critique /colorize /animate /bold...
- 给按钮加 class（如
class="btn btn-danger batch-delete"），方便统一绑定 - JS 中调用
$('#grid-order').yiiGridView('getSelectedRows')，它返回的是一个纯数字 ID 数组（如[101, 205, 307]） - 若返回空数组，先检查是否真的勾选了、GridView ID 是否拼写一致、是否启用了 Pjax（Pjax 下需用
$.pjax.reload()刷新）
提交后要反馈结果并重载数据
删除成功不能静默，要提示用户，并刷新列表避免残留脏数据：
立即学习“前端免费学习笔记（深入）”；
- AJAX 成功后，用
$.pjax.reload({container: '#grid-order-pjax'})（如果用了 Pjax）或location.reload()强刷 - 更推荐服务端返回 JSON（如
{success: true, count: 3}），前端用alert(`已删除 ${res.count} 条`)明确告知 - 失败时捕获 HTTP 状态码或后端 error 字段，在页面顶部用
Yii::$app->session->setFlash('error', ...)展示错误原因
额外建议：加全选/反选和防误操作
提升体验和安全性，可补充两处细节：
- 在列头复选框上加 JS 全选逻辑：
$('.select-on-check-all').on('click', function(){...})，配合data-toggle="tooltip"提示作用 - 删除前弹出确认框：
if (!confirm('确定要删除选中的 ' + keys.length + ' 条记录？')) return; - 禁用按钮防止重复提交：
$btn.prop('disabled', true).text('删除中...')，完成后恢复
