关于SurveyJS实现类Loop and Merge功能（按教室分独立页面展示问卷）的代码示例咨询

当然可以实现！这种按实体拆分独立页面的需求在SurveyJS里完全能搞定，下面我就给你一步步拆解具体的实现思路和代码示例：

核心实现思路 #

咱们的需求可以分成三个核心环节：

• 让用户输入教室数量，生成对应行数的矩阵来收集教室名称
• 监听用户提交的教室名称数据，动态为每个教室创建专属问卷页面
• 在每个专属页面顶部显示对应的教室名称，同时添加该教室的专属问题

具体代码示例 #

先来看完整的实现代码，我会在后面逐段解释：

<!-- 引入SurveyJS的核心库和样式 -->
<link href="https://unpkg.com/survey-jquery@1.9.128/defaultV2.min.css" rel="stylesheet">
<script src="https://unpkg.com/survey-jquery@1.9.128/survey.jquery.min.js"></script>

<div id="surveyContainer"></div>

<script>
// 初始化问卷基本配置
const survey = new Survey.Model({
  title: "班级教学情况调研",
  pages: [
    // 第一页：输入教室数量
    {
      name: "classroomCountPage",
      elements: [
        {
          type: "text",
          name: "classroomCount",
          title: "你一共教授几个教室？",
          inputType: "number",
          min: 1,
          isRequired: true,
          validators: [{ type: "numeric", minValue: 1 }]
        }
      ]
    },
    // 第二页：输入每个教室的名称
    {
      name: "classroomNamesPage",
      elements: [
        {
          type: "matrixdynamic",
          name: "classroomNames",
          title: "请填写每个教室的名称",
          isRequired: true,
          rowCount: 1,
          columns: [
            {
              name: "className",
              title: "教室名称",
              cellType: "text",
              isRequired: true
            }
          ],
          // 根据用户输入的数量自动调整矩阵行数
          visibleIf: "{classroomCount} > 0",
          rowCountChanged: function(sender, options) {
            if (options.value > 0) {
              sender.rowCount = parseInt(survey.getValue("classroomCount"));
            }
          }
        }
      ]
    }
    // 动态生成的教室页面会添加在这里
  ]
});

// 监听第二页完成事件，动态生成教室专属页面
survey.onPageAdded.add(function(sender, options) {
  if (options.page.name === "classroomNamesPage") {
    survey.onComplete.add(function(sender, options) {
      // 获取用户输入的所有教室名称
      const classroomNames = survey.getValue("classroomNames") || [];
      // 清空之前可能生成的动态页面（防止重复提交）
      const dynamicPages = survey.pages.filter(p => p.name.startsWith("classroomPage_"));
      dynamicPages.forEach(page => survey.pages.splice(survey.pages.indexOf(page), 1));
      
      // 为每个教室创建专属页面
      classroomNames.forEach((classroom, index) => {
        const className = classroom.className;
        survey.addPage({
          name: `classroomPage_${index}`,
          title: `${className} 教学情况调研`,
          elements: [
            // 页面顶部显示教室名称（用HTML富文本突出显示）
            {
              type: "html",
              html: `<h3>当前调研教室：<strong>${className}</strong></h3>`
            },
            {
              type: "text",
              name: `studentCount_${index}`,
              title: `请输入${className}的学生总数`,
              inputType: "number",
              min: 0,
              isRequired: true
            },
            {
              type: "text",
              name: `parentHelpCount_${index}`,
              title: `请输入${className}中得到家长辅导的学生数量`,
              inputType: "number",
              min: 0,
              isRequired: true
            },
            {
              type: "comment",
              name: `learningEnvSummary_${index}`,
              title: `请简要描述${className}的学习环境`,
              isRequired: true
            }
          ]
        });
      });
      
      // 跳转到第一个动态生成的教室页面
      survey.currentPage = survey.pages.find(p => p.name.startsWith("classroomPage_"));
    });
  }
});

// 渲染问卷
survey.render("surveyContainer");
</script>

关键细节说明 #

• 动态调整矩阵行数：通过rowCountChanged事件，把矩阵行数和用户输入的教室数量绑定，确保矩阵行数和实际教室数一致
• 动态页面生成：在用户完成教室名称填写后，通过onComplete事件获取所有教室名称，循环生成对应页面，每个页面有唯一的名称标识（classroomPage_${index}）
• 教室名称展示：用HTML类型的问题在页面顶部显示教室名称，通过模板字符串直接插入用户输入的名称，确保每个页面显示对应教室的信息
• 避免重复页面：每次生成动态页面前，先删除之前可能存在的动态页面，防止重复提交导致页面堆积

额外优化建议 #

• 你可以给动态页面添加前进/后退按钮的逻辑，让用户可以在不同教室页面之间切换
• 如果需要对动态生成的问题做校验，可以在创建页面时给问题添加validators配置
• 最终收集的数据会以studentCount_0、parentHelpCount_0这样的键名存储，你可以在onComplete事件里把这些数据整理成更清晰的结构，方便后续处理

内容来源于stack exchange