TreeView复选框实现单选按钮功能（基于Group字段扩展）

刚好做过类似的需求，给你一套灵活的实现方案——既能满足当前同一group下仅选一个的单选需求，又能轻松扩展未来的复选组场景，完全通过JSON的group字段控制，彻底摆脱硬编码条件的限制。

核心设计思路 #

• 用group字段标识节点所属分组：值为0的节点不属于任何受控组，默认支持自由勾选（复选）；值相同的正整数节点属于同一个单选组
• 未来扩展时，只需修改group字段的格式（比如改成对象），就能支持复选组，不用大改核心逻辑
• 渲染时根据group字段动态生成控件（单选/复选），同时处理对应组的选中互斥逻辑

具体实现步骤 #

1. 数据分组记录：解析JSON时，维护一个全局对象存储各单选组的当前选中节点ID，方便快速处理互斥逻辑
2. 动态控件渲染：遍历节点时，根据group值判断生成单选按钮还是复选框：
   • group > 0：生成单选按钮，同一组的单选按钮使用相同的name属性（原生HTML会自动处理互斥）
   • group = 0：生成复选框，每个节点独立控制
3. 选中事件处理：
   • 单选组：选中某节点时，自动记录该组的选中状态，可同步触发业务逻辑
   • 复选节点：自由处理选中/取消状态，不受其他节点影响

代码示例（原生JavaScript） #

// 你的示例JSON数据
const treeData = [
  { 
    id:"1", 
    text: "Items", 
    expanded: true, 
    List: [ 
      { id:"2",text: "book" ,group: 1},
      { id:"3",text: "chair",group: 1 },
      { id:"4",text: "table",group: 1 },
      { id:"5",text: "mat", group: 0 },
      { id:"6",text: "lamp", group: 0 }
    ] 
  }
];

// 存储各单选组的当前选中节点ID（可选，用于业务逻辑处理）
const selectedGroupMap = {};

// 递归渲染树形节点
function renderTreeNodes(nodes, parentContainer) {
  nodes.forEach(node => {
    // 创建节点容器
    const itemWrapper = document.createElement('div');
    itemWrapper.style.marginLeft = '15px';
    
    // 根据group值创建输入控件
    const input = document.createElement('input');
    if (node.group > 0) {
      input.type = 'radio';
      input.name = `radio-group-${node.group}`; // 同组单选按钮共享name，原生互斥
    } else {
      input.type = 'checkbox';
      input.name = `checkbox-item-${node.id}`;
    }
    input.value = node.id;
    
    // 绑定选中事件
    input.addEventListener('change', (e) => {
      if (node.group > 0) {
        selectedGroupMap[node.group] = e.target.value;
        console.log(`单选组 ${node.group} 选中：${node.text}`);
      } else {
        console.log(`节点 ${node.text} 已${e.target.checked ? '选中' : '取消选中'}`);
      }
    });
    
    // 创建节点文本标签
    const label = document.createElement('label');
    label.textContent = node.text;
    label.style.marginLeft = '5px';
    
    // 组装节点元素
    itemWrapper.appendChild(input);
    itemWrapper.appendChild(label);
    parentContainer.appendChild(itemWrapper);
    
    // 递归渲染子节点（如果节点展开且有子列表）
    if (node.expanded && node.List?.length) {
      const subContainer = document.createElement('div');
      parentContainer.appendChild(subContainer);
      renderTreeNodes(node.List, subContainer);
    }
  });
}

// 初始化渲染（假设页面上有id为tree-root的容器）
const rootContainer = document.getElementById('tree-root');
renderTreeNodes(treeData, rootContainer);

未来扩展复选组的预留方案 #

如果之后需要支持同一组内多选，只需修改JSON的group字段为对象格式，增加type标识，再微调渲染逻辑即可，完全不需要重构现有代码：

修改后的JSON示例 #

const extendedTreeData = [
  { 
    id:"1", 
    text: "Items", 
    expanded: true, 
    List: [ 
      { id:"2",text: "book" ,group: { type: "radio", id: 1 }}, // 单选组1
      { id:"3",text: "chair",group: { type: "radio", id: 1 }},
      { id:"4",text: "table",group: { type: "checkbox", id: 2 }}, // 复选组2
      { id:"5",text: "mat", group: { type: "checkbox", id: 2 }},
      { id:"6",text: "lamp", group: 0 } // 自由复选节点
    ] 
  }
];

调整后的渲染逻辑片段 #

// 替换原有的控件创建逻辑
const groupConfig = node.group;
let inputType = 'checkbox';
let inputName = `checkbox-item-${node.id}`;

if (typeof groupConfig === 'number') {
  inputType = groupConfig > 0 ? 'radio' : 'checkbox';
  inputName = groupConfig > 0 ? `radio-group-${groupConfig}` : inputName;
} else if (typeof groupConfig === 'object') {
  inputType = groupConfig.type || 'checkbox';
  inputName = groupConfig.id ? `${inputType}-group-${groupConfig.id}` : inputName;
}

input.type = inputType;
input.name = inputName;

这样就能无缝扩展复选组功能，完全符合你“通过修改JSON实现扩展”的需求！

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