jQuery Bootgrid 动态切换数据源 URL 并刷新表格

jquery bootgrid 不支持直接修改已初始化实例的 `url` 参数，需通过销毁重建方式实现动态 url 切换，并配合响应处理器适配不同数据结构，从而完成多源数据的实时加载与渲染。

在实际开发中，当需要根据用户选择（如切换数据源 #1–#10）动态加载不同后端接口的数据时，不能仅修改 url 配置项并调用 .bootgrid("reload")——因为 Bootgrid 初始化后会缓存配置，url 属性不可热更新。正确做法是：先销毁当前实例，重绘表头结构（确保 data-column-id 与新数据字段匹配），再以新 URL 和定制化响应处理器重新初始化。

以下是推荐的实现模式：

Devin

世界上第一位AI软件工程师，可以独立完成各种开发任务。

下载

✅ 核心步骤

1. 销毁现有实例：$("#grid-data").bootgrid("destroy")
2. 动态更新 ：根据目标数据源调整列定义（data-column-id、data-type 等必须与返回字段一致）
3. 重新绑定 Bootgrid：传入新 url 及专用 responseHandler，将原始 API 响应转换为 Bootgrid 所需格式（含 current、rowCount、rows、total）

? 示例代码（精简可复用版）

// 统一绑定函数：接收 URL 和响应处理回调
function bindBootGrid(url, responseHandler) {
  $("#grid-data").bootgrid({
    ajax: true,
    ajaxSettings: { method: "GET", cache: false },
    navigation: 0, // 隐藏分页栏（按需启用）
    url: url,
    responseHandler: responseHandler
  });
}

// 产品数据响应处理器
function productResponse(res) {
  return {
    current: 1,
    rowCount: res.products?.length || 0,
    rows: res.products || [],
    total: res.total || 0
  };
}

// 用户数据响应处理器
function userResponse(res) {
  return {
    current: 1,
    rowCount: res.users?.length || 0,
    rows: res.users || [],
    total: res.total || 0
  };
}

// 监听下拉框变化
$("#selectOption").on("change", function() {
  const $grid = $("#grid-data");
  const selectedUrl = $(this).val();
  const dataHandle = $(this).data("handel");

  // 销毁旧实例
  $grid.bootgrid("destroy");

  // 重绘表头（关键！字段必须与 responseHandler 返回的 rows 结构一致）
  if (dataHandle === "product") {
    $grid.find("thead").html(`
      
        ID
        标题
        价格
      
    `);
    bindBootGrid(selectedUrl, productResponse);
  } else if (dataHandle === "user") {
    $grid.find("thead").html(`
      
        ID
        名
        姓
      
    `);
    bindBootGrid(selectedUrl, userResponse);
  }
});

⚠️ 注意事项

• data-column-id 必须严格匹配响应数据中的字段名，否则列值无法渲染；
• 若接口返回结构不统一（如分页字段名不同），务必在 responseHandler 中做标准化转换；
• 频繁销毁重建可能影响性能，如需高频切换，建议预加载常用配置或封装为 Vue/React 组件级状态管理；
• Bootgrid v1.3.1 之后版本仍无原生 setUrl() 方法，此销毁重建法是官方推荐方案。

通过以上方式，即可安全、灵活地实现多数据源动态切换，满足“用户选源 → 表格刷新”的交互需求。