无法在jsGrid的loadData()中使用AJAX，如何更新未填充完成的数组数据？

嘿，针对你遇到的jsGrid数据更新问题，我给你梳理几个可行的方案，核心思路是先同步更新数据源ary，再触发jsGrid重新加载数据——毕竟你已经基于ary实现了完整的增删改查逻辑，只要数据源是最新的，jsGrid就能渲染正确的内容：

1. 先异步填充完整的ary，再刷新jsGrid #

既然loadData里不能用AJAX，那我们可以在外部提前用AJAX获取完整数据填充ary，之后再让jsGrid加载数据：

// 第一步：外部异步获取数据，填充ary
$.ajax({
  url: "你的数据接口地址",
  method: "GET",
  success: function(fullData) {
    // 把拿到的完整数据赋值给ary
    ary = fullData;
    
    // 如果jsGrid已经初始化完成，触发重新加载
    $("#jsGrid容器ID").jsGrid("loadData");
    // 若为第一次初始化，直接传入配置（已初始化过可忽略此步）
    // $("#jsGrid容器ID").jsGrid({ /* 你的配置项 */ });
  }
});

当ary被填满后，调用loadData()会让jsGrid重新执行controller.loadData里的过滤逻辑，用最新的ary渲染表格。

2. 分批更新ary后手动刷新 #

如果ary是逐步填充的（比如分批加载数据），每次更新ary后，直接调用jsGrid的刷新方法即可：

// 示例：给ary新增一条数据
ary.push({ id: 101, name: "新数据", ... });

// 触发jsGrid重新加载数据
$("#jsGrid容器ID").jsGrid("loadData");

不管是新增、修改还是删除ary里的项，只要ary是最新状态，调用loadData()就能让jsGrid同步显示最新内容。

3. 配合增删改接口同步更新ary #

你现有的updateItem和insertItem里调用了框架的请求方法，记得在接口请求成功后，同步更新ary再刷新jsGrid，确保数据源和页面一致：

controller: {
  loadData: function(filter) {
    return $.grep(ary, function(obj, index) {
      // 你的过滤逻辑
    });
  },
  updateItem: function(item) {
    // 调用更新接口，传入回调
    appName.doRequest("updateRecord", item, function(response) {
      // 找到ary里对应的项并更新
      const targetIndex = ary.findIndex(obj => obj.id === item.id);
      if (targetIndex !== -1) {
        ary[targetIndex] = response.updatedRecord;
      }
      // 刷新jsGrid
      $("#jsGrid容器ID").jsGrid("loadData");
    });
  },
  insertItem: function(item) {
    appName.doRequest("insertRecord", item, function(response) {
      // 把新增成功的数据加入ary
      ary.push(response.newRecord);
      // 刷新jsGrid
      $("#jsGrid容器ID").jsGrid("loadData");
    });
  },
  deleteItem: function(item) {
    appName.doRequest("deleteRecord", item.id, function() {
      // 从ary里移除对应项
      ary = ary.filter(obj => obj.id !== item.id);
      // 刷新jsGrid
      $("#jsGrid容器ID").jsGrid("loadData");
    });
  }
}

关键提醒 #

jsGrid的loadData()方法会重新调用你配置的controller.loadData，所以只要ary是最新的，就能自动应用过滤逻辑并渲染正确的内容，完全不需要在loadData内部做AJAX请求。

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