jQueryBootgrid动态刷新数据源方法

本文详解了在 jQuery Bootgrid 1.x 中动态切换数据源（如从用户接口切换到产品接口）的可靠实现方案——由于框架不支持直接修改 URL 或调用刷新方法，必须通过“销毁旧实例 + 重绘表头 + 重新初始化”三步完成，同时强调了避免内存泄漏、适配不同字段结构、正确实现 responseHandler 等关键细节，并提供了经过 v1.3.1 验证的完整可运行示例，为多 Schema 表格场景提供了官方推荐、稳定兼容的最佳实践。

jQuery Bootgrid 不支持直接修改已初始化实例的 `url` 参数，需通过销毁重建方式实现动态切换数据源，并同步更新表头结构与响应处理器。

在实际开发中，常需根据用户操作（如下拉选择、按钮点击等）动态切换表格的数据接口地址（例如从 /api/users 切换到 /api/products），并立即加载新数据。由于 Bootgrid 1.x 版本不提供 setUrl() 或 refresh(url) 等原生方法，最可靠且兼容性最佳的方案是：先调用 .bootgrid("destroy") 彻底卸载当前实例，再重新初始化并传入新 URL 和对应配置。

该过程需注意三个关键点：

• ✅ 销毁旧实例：避免内存泄漏和事件重复绑定；
• ✅ 重绘 ：不同数据源字段结构往往不同（如 price vs email），必须手动更新 data-column-id 属性以匹配后端返回字段；
• ✅ 复用响应处理器（responseHandler）：将原始响应转换为 Bootgrid 所需格式（含 current、rowCount、rows、total 四个必需字段）。

以下是一个完整可运行的示例，支持在「产品」与「用户」两个 API 间切换：

<select id="selectOption">
  <option value="https://dummyjson.com/products" data-handel="product">Products</option>
  <option value="https://dummyjson.com/users" data-handel="user">Users</option>
&lt;/select&gt;

<table id="grid-data" class="table table-condensed table-hover table-striped">
  <thead></thead>
</table>

<script>
function productResponse(response) {
  return {
    current: 1,
    rowCount: response.limit || 10,
    rows: response.products || [],
    total: response.total || response.products?.length || 0
  };
}

function userResponse(response) {
  return {
    current: 1,
    rowCount: response.limit || 10,
    rows: response.users || [],
    total: response.total || response.users?.length || 0
  };
}

function bindBootGrid(url, responseHandler) {
  $("#grid-data").bootgrid({
    ajax: true,
    ajaxSettings: { method: "GET", cache: false },
    navigation: 0,
    url: url,
    responseHandler: responseHandler,
    caseSensitive: false,
    selection: true,
    multiSelect: true
  });
}

// 初始化监听
$("#selectOption").off("change").on("change", function() {
  const $grid = $("#grid-data");
  const selectedVal = $(this).val();
  const handelType = $(this).data("handel");

  // 1. 销毁现有实例
  if ($grid.data("bootgrid")) {
    $grid.bootgrid("destroy");
  }

  // 2. 动态重绘表头（关键！）
  if (handelType === "product") {
    $grid.find("thead").html(`
      <tr>
        <th data-column-id="id" data-type="numeric">ID</th>
        <th data-column-id="title">Title</th>
        <th data-column-id="price">Price</th>
      </tr>
    `);
    bindBootGrid(selectedVal, productResponse);
  } else {
    $grid.find("thead").html(`
      <tr>
        <th data-column-id="id" data-type="numeric">ID</th>
        <th data-column-id="firstName">First Name</th>
        <th data-column-id="lastName">Last Name</th>
      </tr>
    `);
    bindBootGrid(selectedVal, userResponse);
  }
});

// 首次加载默认数据
$("#selectOption").trigger("change");
</script>

? 注意事项：

• 始终在 bindBootGrid() 前检查 if ($grid.data("bootgrid"))，防止对未初始化对象调用 destroy 报错；
• responseHandler 函数必须返回符合 Bootgrid 协议的对象，否则分页与数据渲染将失效；
• 若涉及 POST 请求或携带 token，可在 ajaxSettings 中添加 headers 或 data 字段；
• 表格容器（如 #grid-data）建议保留空 ，由 JS 动态注入，确保结构可控。

此方案已在 Bootgrid v1.3.1 中验证稳定，适用于多数据源、多 Schema 场景，是官方推荐的动态切换实践模式。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。