JSONForm 中实现带全选功能的字段集(Fieldset)

在表单开发中，我们经常需要实现分组选择功能，特别是在需要批量操作的场景下。JSONForm 作为一个强大的表单生成库，虽然原生不直接支持带全选功能的字段集，但通过一些技巧可以实现这一需求。

实现原理

JSONForm 允许我们在表单定义中使用 HTML 标签和自定义 JavaScript 函数来实现扩展功能。核心思路是：

1. 在字段集的标题部分嵌入一个 HTML 复选框
2. 为该复选框绑定 change 事件处理函数
3. 在函数中控制组内所有复选框的状态

具体实现方案

1. 表单结构定义

首先需要定义一个包含复选框数组的字段集结构。关键点在于：

• 使用 fieldset 类型创建分组
• 在 title 属性中直接嵌入 HTML 复选框标签
• 为组内复选框添加自定义 CSS 类以便选择

{
  "schema": {
    "menu": {
      "type": "array",
      "title": "Options",
      "items": {
        "type": "string",
        "enum": ["starter", "maincourse", "cheese", "dessert"]
      }
    }
  },
  "form": [
    {
      "title": "<input type=\"checkbox\" onchange=\"handleChange()\"> Options (全选)",
      "type": "fieldset",
      "items": [
        {
          "key": "menu",
          "type": "checkboxes",
          "htmlClass": "group-checkboxes",
          "titleMap": {
            "starter": "开胃菜",
            "maincourse": "主菜",
            "cheese": "奶酪",
            "dessert": "甜点"
          }
        }
      ]
    }
  ]
}

2. JavaScript 控制逻辑

全选功能的实现需要编写对应的 JavaScript 函数：

function handleChange(event) {
  const isChecked = event.target.checked;
  // 选择组内所有复选框并同步状态
  document.querySelectorAll('.group-checkboxes input[type="checkbox"]')
    .forEach(checkbox => {
      checkbox.checked = isChecked;
    });
}

样式调整建议

默认情况下，标题中的复选框可能不会完美对齐。可以通过 CSS 进行微调：

fieldset legend input[type="checkbox"] {
  vertical-align: middle;
  margin-right: 5px;
}

注意事项

1. 在 Angular 等框架中使用时，需要确保函数定义在组件作用域内
2. 事件绑定只能使用简单的函数调用，不能直接写复杂逻辑
3. 对于动态生成的表单，需要确保函数在全局作用域可用
4. 不同框架封装(如 ajsf)可能有自己的限制和特殊处理方式

通过这种方案，我们可以在 JSONForm 中实现既美观又实用的带全选功能的字段集，提升表单的用户体验。