在Google App Maker中动态创建复选框列表的技术咨询

嘿，我懂你现在的困扰——已经搞定了JDBC调用返回单个值，但要处理动态数组生成UI组件，翻文档还找不到相关说明对吧？其实App Maker是支持动态创建组件的，只是这块的示例比较少，我来给你一步步拆解实现思路：

核心：动态创建组件的关键方法 #

App Maker的客户端脚本里有个app.createWidget()方法，这是实现你需求的核心。你可以用它生成任意内置组件（比如复选框、单选按钮、折叠面板），只需要传入组件类型和配置参数，再把生成的组件添加到页面的容器组件（比如垂直面板、折叠容器）里就行。

第一步：调整服务器脚本返回对象数组 #

你现在的服务器脚本已经能调用JDBC，只需要把返回逻辑改成返回对象数组就行。比如原来返回单个值，现在改成把每条查询记录封装成对象，塞进数组返回：

// 服务器脚本：getItemsById
function getItemsById(inputId) {
  var conn = Jdbc.getConnection('jdbc:xxx', 'username', 'password');
  var stmt = conn.prepareStatement('SELECT id, display_name FROM your_table WHERE parent_id = ?');
  stmt.setString(1, inputId);
  var rs = stmt.executeQuery();
  
  var items = [];
  while (rs.next()) {
    items.push({
      id: rs.getString('id'),
      name: rs.getString('display_name')
    });
  }
  
  rs.close();
  stmt.close();
  conn.close();
  
  return items;
}

第二步：客户端调用并动态生成组件 #

接下来在页面的客户端脚本里，监听输入框的确认事件（比如按钮点击、回车），调用服务器脚本拿到数组，然后循环生成组件。这里给你两种方案的示例：

方案1：用Accordion实现带展开/折叠的单选按钮组 #

如果你想保留折叠面板的展开/折叠功能，可以给每个数组元素创建一个折叠面板项，里面放单选按钮：

// 客户端脚本：绑定到查询按钮的点击事件
function generateAccordionItems() {
  var inputId = app.pages.YourPage.widgets.InputId.value;
  var accordion = app.pages.YourPage.widgets.YourAccordion;
  
  // 先清空旧的折叠项，避免重复叠加
  while (accordion.children.length > 0) {
    accordion.removeChild(accordion.children[0]);
  }
  
  // 调用服务器脚本获取数据
  google.script.run
    .withSuccessHandler(function(items) {
      items.forEach(function(item) {
        // 创建折叠面板项
        var section = app.createWidget('AccordionSection', {
          headerText: item.name
        });
        
        // 创建单选按钮，同一个name实现单选组
        var radio = app.createWidget('RadioButton', {
          name: 'itemGroup',
          text: '选择此选项',
          tag: item.id // 用tag存item的ID，方便后续获取选中值
        });
        
        // 把单选按钮添加到折叠项，再把折叠项加入面板
        section.addChild(radio);
        accordion.addChild(section);
      });
    })
    .withFailureHandler(function(error) {
      console.error('获取数据失败:', error);
    })
    .getItemsById(inputId);
}

方案2：普通的复选框/单选按钮列表 #

如果不需要展开折叠功能，直接用垂直面板做容器生成列表更简单：

// 客户端脚本：绑定到查询按钮的点击事件
function generateCheckboxList() {
  var inputId = app.pages.YourPage.widgets.InputId.value;
  var container = app.pages.YourPage.widgets.VerticalPanelContainer;
  
  // 清空旧组件，避免重复显示
  while (container.children.length > 0) {
    container.removeChild(container.children[0]);
  }
  
  google.script.run
    .withSuccessHandler(function(items) {
      items.forEach(function(item) {
        // 这里换成RadioButton就能实现单选组，记得给同一组设置相同name
        var checkbox = app.createWidget('Checkbox', {
          text: item.name,
          tag: item.id
        });
        
        container.addChild(checkbox);
      });
    })
    .withFailureHandler(function(error) {
      console.error('获取数据失败:', error);
    })
    .getItemsById(inputId);
}

第三步：获取用户选中的项 #

如果需要后续获取用户选中的内容，可以遍历容器的子组件，判断选中状态：

function getSelectedItems() {
  var container = app.pages.YourPage.widgets.VerticalPanelContainer;
  var selectedIds = [];
  
  container.children.forEach(function(widget) {
    if (widget.type === 'Checkbox' && widget.checked) {
      selectedIds.push(widget.tag);
    }
    // 如果是单选按钮，直接判断widget.checked即可
  });
  
  console.log('选中的ID列表:', selectedIds);
  return selectedIds;
}

一些注意事项 #

• 每次生成新组件前一定要清空容器的旧组件，不然会叠加显示；
• 用tag属性存储业务数据（比如item的ID）是个实用小技巧，避免把数据硬编码到组件文本里；
• 单选按钮要设置相同的name属性，才能实现同一组内只能选一个的效果；
• 如果返回的数组长度很大，建议考虑分页加载，避免一次性生成太多组件影响页面性能。

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