Google App Maker中跨数据源关联表的表格筛选问题求助

嘿，我刚入门Google App Maker的时候也折腾过类似的联动需求，其实操作步骤挺清晰的，给你一步步说怎么实现：

1. 确认数据源关联关系 #

首先先确认你的product和productColor的一对多关系已经正确配置：在productColor数据源里，应该有一个关联字段（比如命名为product）指向product数据源的主键，或者有一个存储产品ID的字段（比如productId）。这一步是联动的基础，确保数据之间能正确关联上。

2. 给产品表格添加选择变更事件 #

打开App Maker编辑器，选中你的产品表格组件，然后切换到右侧的Events面板，找到On Selection Change这个事件，点击旁边的"+"号添加一个客户端脚本。

3. 编写筛选联动的脚本 #

在弹出的脚本编辑器里，粘贴以下代码（可以根据你的实际字段名调整）：

// 获取当前选中的产品记录
var selectedProduct = widget.datasource.selectedItem;

// 获取颜色变体表格对应的数据源
var colorDatasource = app.datasources.productColor;

// 根据选中状态设置过滤条件
if (selectedProduct) {
  // 如果选中了产品，筛选出属于该产品的颜色变体
  // 这里用关联字段的方式，如果你是用productId字段的话，改成productId._equals = selectedProduct._key
  colorDatasource.query.filters.product._equals = selectedProduct._key;
} else {
  // 如果没有选中任何产品，清除过滤，显示所有颜色变体
  colorDatasource.query.filters.product._equals = null;
}

// 执行查询，更新颜色变体表格的内容
colorDatasource.load();

小提示： #

• 如果你的productColor里是用productId字段存储产品ID的，那过滤条件要改成：colorDatasource.query.filters.productId._equals = selectedProduct.Id;（这里的Id是product数据源的主键字段名，根据你的实际情况调整）
• 脚本里的_key是App Maker自带的记录主键标识，比手动写主键字段更稳妥

4. 可选：设置初始状态 #

如果希望页面刚加载时，颜色变体表格默认是空的或者显示第一条产品的变体，可以在页面的On Load事件里添加脚本：

// 页面加载时默认不显示任何颜色变体
app.datasources.productColor.query.filters.product._equals = null;
app.datasources.productColor.load();

// 或者默认选中第一个产品并加载其变体
var productDs = app.datasources.product;
productDs.load(function() {
  if (productDs.items.length > 0) {
    productDs.selectedItem = productDs.items[0];
    // 触发产品表格的选择变更事件，或者直接调用筛选逻辑
    var colorDs = app.datasources.productColor;
    colorDs.query.filters.product._equals = productDs.items[0]._key;
    colorDs.load();
  }
});

测试验证 #

保存你的应用后，预览页面：点击产品表格里的任意一条记录，颜色变体表格应该会自动刷新，只显示该产品对应的颜色；取消选中产品（点击表格空白处），颜色表格会回到显示全部的状态。

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