如何以编程方式修改JQuery Bootgrid的URL并刷新数据

完全可以通过编程方式修改Bootgrid的数据源URL并刷新表格，具体实现步骤如下：

核心实现逻辑 #

借助Bootgrid提供的内置方法修改URL配置，再触发数据刷新：

• 用option方法更新表格的数据源URL
• 用clear清空现有内容，再用reload发起新的AJAX请求获取数据

代码示例 #

1. 基础表格初始化（保留你的原有代码） #

var myrequestgrid = $("#myrequestgrid").bootgrid({
    caseSensitive: false,
    ajax: true,
    selection: true, // 启用行选择
    multiSelect: true, // 允许多选
    url: "resource/myrequestdatafromsource1.php"
});

2. 编写数据源切换函数 #

// 根据数据源编号切换并刷新表格
function switchDataSource(sourceNumber) {
    // 更新表格的数据源URL
    myrequestgrid.bootgrid('option', 'url', `resource/myrequestdatafromsource${sourceNumber}.php`);
    // 清空旧数据+重新加载新数据
    myrequestgrid.bootgrid('clear').bootgrid('reload');
}

3. 绑定用户交互事件（示例：下拉选择） #

假设页面有一个选择数据源的下拉框：

<select id="sourceSelector">
    <option value="1">数据源1</option>
    <option value="2">数据源2</option>
    <option value="3">数据源3</option>
    <!-- 依次添加到数据源10的选项 -->
    <option value="10">数据源10</option>
</select>

绑定下拉框的切换事件：

$('#sourceSelector').on('change', function() {
    var selectedSource = $(this).val();
    switchDataSource(selectedSource);
});

注意事项 #

• 确保新URL对应的PHP接口返回符合Bootgrid要求的JSON结构，示例格式如下：

  {
      "current": 1,
      "rowCount": 10,
      "rows": [/* 你的数据行数组 */],
      "total": 50
  }
  

• 如果不需要清空旧数据，也可以直接调用myrequestgrid.bootgrid('reload')，但清空后再加载能避免新旧数据过渡时的视觉混乱

内容的提问来源于stack exchange，提问作者Tamtomo Abdi Negoro