Laravel10 添加司机视图实现带搜索的数据表选择功能

1. 前端结构设计 #

先搭建表单核心结构，包含选择触发按钮、选中结果回显区、隐藏域（用于提交ID），以及对应的弹窗/折叠Datatable容器：

<!-- 添加司机表单 -->
<form id="addDriverForm">
  <!-- 车主选择模块 -->
  <div class="form-group">
    <label>所属车主</label>
    <div>
      <button type="button" id="selectOwnerBtn" class="btn btn-primary">选择车主</button>
      <div id="ownerSelected" class="mt-2">未选择</div>
      <input type="hidden" id="ownerId" name="OwnerId">
    </div>
  </div>

  <!-- 车辆选择模块 -->
  <div class="form-group">
    <label>关联车辆</label>
    <div>
      <button type="button" id="selectVehicleBtn" class="btn btn-primary">选择车辆</button>
      <div id="vehicleSelected" class="mt-2">未选择</div>
      <input type="hidden" id="vehicleId" name="VehicleId">
    </div>
  </div>

  <!-- 其他司机信息字段 -->
  <div class="form-group">
    <label>司机姓名</label>
    <input type="text" name="DriverName" class="form-control">
  </div>

  <button type="submit" class="btn btn-success">保存司机</button>
</form>

<!-- 车主选择弹窗 -->
<div class="modal fade" id="ownerModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">选择车主</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <table id="ownerDatatable" class="table table-striped" style="width:100%"></table>
      </div>
    </div>
  </div>
</div>

<!-- 车辆选择弹窗 -->
<div class="modal fade" id="vehicleModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">选择车辆</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <table id="vehicleDatatable" class="table table-striped" style="width:100%"></table>
      </div>
    </div>
  </div>
</div>

2. Datatable初始化与交互逻辑 #

用jQuery Datatable实现带搜索、分页的列表，绑定行点击事件完成选中回显：

$(document).ready(function() {
  // 初始化车主Datatable
  const ownerTable = $('#ownerDatatable').DataTable({
    ajax: {
      url: '/api/owners', // 后端获取车主列表接口
      type: 'GET',
      dataSrc: ''
    },
    columns: [
      { data: 'Id', title: 'ID' },
      { data: 'Name', title: '车主姓名' },
      { data: 'Phone', title: '联系电话' }
    ],
    searching: true, // 开启内置搜索
    paging: true,
    ordering: true
  });

  // 车主行点击选中逻辑
  $('#ownerDatatable tbody').on('click', 'tr', function() {
    const selectedData = ownerTable.row(this).data();
    $('#ownerSelected').text(`车主：${selectedData.Name}（电话：${selectedData.Phone}）`);
    $('#ownerId').val(selectedData.Id);
    $('#ownerModal').modal('hide');
  });

  // 初始化车辆Datatable
  const vehicleTable = $('#vehicleDatatable').DataTable({
    ajax: {
      url: '/api/vehicles', // 后端获取车辆列表接口
      type: 'GET',
      dataSrc: ''
    },
    columns: [
      { data: 'Id', title: '车辆ID' },
      { data: 'PlateNumber', title: '车牌号' },
      { data: 'Model', title: '车型' },
      { data: 'OwnerName', title: '所属车主' }
    ],
    searching: true,
    paging: true,
    ordering: true
  });

  // 车辆行点击选中逻辑
  $('#vehicleDatatable tbody').on('click', 'tr', function() {
    const selectedData = vehicleTable.row(this).data();
    $('#vehicleSelected').text(`车辆：${selectedData.PlateNumber}（${selectedData.Model}）`);
    $('#vehicleId').val(selectedData.Id);
    $('#vehicleModal').modal('hide');
  });

  // 弹窗触发按钮绑定
  $('#selectOwnerBtn').click(function() {
    $('#ownerModal').modal('show');
    ownerTable.ajax.reload(); // 每次打开弹窗刷新数据
  });

  $('#selectVehicleBtn').click(function() {
    $('#vehicleModal').modal('show');
    vehicleTable.ajax.reload();
  });

  // 表单提交处理
  $('#addDriverForm').submit(function(e) {
    e.preventDefault();
    const formData = $(this).serialize();
    $.post('/api/drivers', formData, function() {
      alert('司机添加成功');
      $('#addDriverForm')[0].reset();
      $('#ownerSelected').text('未选择');
      $('#vehicleSelected').text('未选择');
    });
  });
});

3. 后端接口核心逻辑 #

需要提供三个接口，处理数据查询和保存：

• 车主列表接口：支持分页、搜索过滤
• 车辆列表接口：同车主列表逻辑
• 司机保存接口：接收表单数据写入Drivers表

以ASP.NET Core为例的后端代码片段：

// 获取车主列表接口
[HttpGet("api/owners")]
public IActionResult GetOwners(int start, int length, string searchValue)
{
    var query = _context.Owners.AsQueryable();
    if (!string.IsNullOrEmpty(searchValue))
    {
        query = query.Where(o => o.Name.Contains(searchValue) || o.Phone.Contains(searchValue));
    }
    var totalCount = query.Count();
    var data = query.Skip(start).Take(length).ToList();
    return Ok(new { draw = Request.Query["draw"], recordsTotal = totalCount, recordsFiltered = totalCount, data });
}

// 保存司机接口
[HttpPost("api/drivers")]
public IActionResult AddDriver(Driver driver)
{
    if (ModelState.IsValid)
    {
        _context.Drivers.Add(driver);
        _context.SaveChanges();
        return Ok();
    }
    return BadRequest(ModelState);
}

4. 替代方案：折叠式Datatable（非弹窗） #

如果不想用弹窗，可将Datatable放在页面隐藏区域，点击按钮切换显示/隐藏：

<!-- 车主选择折叠区域 -->
<div class="form-group">
  <label>所属车主</label>
  <div>
    <button type="button" id="toggleOwnerTable" class="btn btn-primary">选择车主</button>
    <div id="ownerSelected" class="mt-2">未选择</div>
    <input type="hidden" id="ownerId" name="OwnerId">
    <div id="ownerTableContainer" class="mt-3 d-none">
      <table id="ownerDatatable" class="table table-striped" style="width:100%"></table>
    </div>
  </div>
</div>

对应JS切换逻辑：

$('#toggleOwnerTable').click(function() {
  $('#ownerTableContainer').toggleClass('d-none');
  if (!$('#ownerTableContainer').hasClass('d-none')) {
    ownerTable.ajax.reload();
  }
});

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