如何将Bootstrap Table的JS内联数据改为从data.json文件加载？

没问题，把原来的本地JS变量数据源换成外部data.json其实很容易，我给你一步步来操作：

1. 准备正确格式的 data.json 文件 #

首先确保你的JSON文件结构和原来的dataUp完全匹配，字段名、数据类型都要对应。比如：

[
  {
    "id": 1,
    "name": "John",
    "lastname": "Doe",
    "amount": 100.50,
    "age": 30
  },
  {
    "id": 2,
    "name": "Jane",
    "lastname": "Smith",
    "amount": 200.75,
    "age": 28
  }
]

把这个文件放在和HTML同级的目录下（或者根据实际路径调整）。

2. 修改 Bootstrap Table 初始化逻辑 #

方式一：用 Bootstrap Table 自带的 Ajax 配置（推荐） #

Bootstrap Table本身支持通过url参数直接加载远程数据源，这样最省心，还能自动处理数据渲染。你只需要把原来初始化时的data: dataUp替换成url: 'data.json'，同时确保columns配置和字段对应：

$('#your-table-id').bootstrapTable({
  url: 'data.json', // 指向你的JSON文件路径
  columns: [
    { field: 'id', title: 'ID' },
    { field: 'name', title: 'Name' },
    { field: 'lastname', title: 'Last Name' },
    { field: 'amount', title: 'Amount' },
    { field: 'age', title: 'Age' },
    // 如果你有子表格的触发列，比如展开按钮，保留原来的配置即可
    { field: 'operate', title: 'Operate', formatter: function(value, row) {
        return '<a href="javascript:void(0)" class="detail-icon">展开详情</a>';
      }
    }
  ],
  // 原来的子表格逻辑可以保留，比如点击展开时获取当前行数据
  onPostBody: function() {
    $('.detail-icon').on('click', function() {
      var row = $(this).parents('tr').data('index');
      var rowData = $('#your-table-id').bootstrapTable('getData')[row];
      // 这里继续你原来的子表格渲染逻辑即可
    });
  }
});

方式二：手动请求 JSON 后加载数据（适合需要预处理数据的场景） #

如果需要在加载数据前做一些额外处理（比如过滤、转换字段），可以用fetch手动请求JSON，再调用Bootstrap Table的load方法：

// 用fetch请求JSON
fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // 这里可以添加数据预处理逻辑，比如：
    // data = data.filter(item => item.age > 25);
    $('#your-table-id').bootstrapTable('load', data);
  })
  .catch(error => console.error('加载JSON失败:', error));

// 表格初始化时不需要设置data或url，只需要配置columns
$('#your-table-id').bootstrapTable({
  columns: [/* 你的列配置和之前一样 */]
});

3. 注意事项 #

• 路径问题：确保data.json的路径和HTML文件的相对路径正确，比如如果JSON在data文件夹下，路径就是'data/data.json'。
• 跨域限制：如果直接打开本地HTML文件（file://协议），部分浏览器会禁止加载本地JSON文件，建议用本地服务器运行（比如VS Code的Live Server插件）。
• JSON格式正确性：JSON里的字段必须用双引号，不能有 trailing comma（最后一条数据后面不能加逗号），否则会加载失败。

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