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

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

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

以下是推荐的实现模式：

✅ 核心步骤

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() 方法，此销毁重建法是官方推荐方案。

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