如何从JQuery向AlpineJS传值实现批量删除弹窗功能

核心思路 #

JQuery和AlpineJS可通过直接调用组件实例或DOM属性传值两种方式打通，实现选中ID传递并触发删除确认弹窗。

方案一：直接调用Alpine组件实例 #

步骤1：给Alpine组件添加引用标识 #

在弹窗的Alpine组件标签上添加x-ref，方便JQuery定位组件实例：

<div x-data="{ showDeleteModal: false, selectedIds: [] }" x-ref="deleteBulkModal">
  <!-- 弹窗内容 -->
  <div x-show="showDeleteModal" class="modal">
    <p>确认删除选中的 {{ selectedIds.length }} 个用户？</p>
    <button @click="handleConfirmDeleteBulk">确认删除</button>
    <button @click="showDeleteModal = false">取消</button>
  </div>
</div>

步骤2：扩展Alpine的处理方法 #

在Alpine的x-data中添加接收ID、触发弹窗的方法：

x-data="{ 
  showDeleteModal: false, 
  selectedIds: [],
  handleModalDeleteBulk(ids) {
    this.selectedIds = ids;
    this.showDeleteModal = true;
  },
  handleConfirmDeleteBulk() {
    // 批量删除AJAX请求逻辑
    fetch('/recycle.php?action=bulkDelete', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ids: this.selectedIds })
    }).then(res => {
      // 删除成功后刷新表格
      location.reload();
    });
    this.showDeleteModal = false;
  }
}"

步骤3：修改JQuery获取选中ID的代码 #

获取选中ID后，直接调用Alpine组件的方法：

$('.bulk-delete-btn').click(function() {
  let selectedIds = [];
  $('input[name="user_ids"]:checked').each(function() {
    selectedIds.push($(this).val());
  });

  if (selectedIds.length === 0) {
    alert('请选择要删除的用户');
    return;
  }

  // 调用Alpine组件方法触发弹窗
  Alpine.raw($refs.deleteBulkModal).handleModalDeleteBulk(selectedIds);
});

方案二：通过DOM属性传递值 #

若不想直接操作Alpine实例，可通过自定义DOM属性传值：

步骤1：给弹窗添加自定义属性 #

<div x-data="{ showDeleteModal: false, selectedIds: [] }" id="deleteBulkModal" data-selected-ids="">
  <!-- 弹窗内容 -->
  <div x-show="showDeleteModal" class="modal">
    <p>确认删除选中的 {{ selectedIds.length }} 个用户？</p>
    <button @click="handleConfirmDeleteBulk">确认删除</button>
    <button @click="showDeleteModal = false">取消</button>
  </div>
</div>

步骤2：修改Alpine方法读取属性 #

x-data="{ 
  showDeleteModal: false, 
  selectedIds: [],
  openDeleteModal() {
    // 从DOM属性读取选中ID
    const idsStr = document.getElementById('deleteBulkModal').getAttribute('data-selected-ids');
    this.selectedIds = JSON.parse(idsStr);
    this.showDeleteModal = true;
  },
  handleConfirmDeleteBulk() {
    // 批量删除逻辑同方案一
    fetch('/recycle.php?action=bulkDelete', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ids: this.selectedIds })
    }).then(res => {
      location.reload();
    });
    this.showDeleteModal = false;
  }
}"

步骤3：修改JQuery代码设置属性并触发弹窗 #

$('.bulk-delete-btn').click(function() {
  let selectedIds = [];
  $('input[name="user_ids"]:checked').each(function() {
    selectedIds.push($(this).val());
  });

  if (selectedIds.length === 0) {
    alert('请选择要删除的用户');
    return;
  }

  // 将选中ID转成JSON存入DOM属性
  $('#deleteBulkModal').attr('data-selected-ids', JSON.stringify(selectedIds));
  // 触发Alpine弹窗方法
  Alpine.raw(document.getElementById('deleteBulkModal')).openDeleteModal();
});

PHP后端处理（recycle.php） #

在recycle.php中添加批量删除逻辑：

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_GET['action']) && $_GET['action'] === 'bulkDelete') {
  $data = json_decode(file_get_contents('php://input'), true);
  $ids = $data['ids'];
  
  // 数据库删除逻辑示例
  // $safeIds = array_map('intval', $ids);
  // $idsStr = implode(',', $safeIds);
  // $pdo->exec("DELETE FROM users WHERE id IN ($idsStr)");
  
  echo json_encode(['success' => true]);
  exit;
}

内容的提问来源于stack exchange，提问作者Misanthropia