JeecgBoot树形表格checkStrictly属性失效问题解析与解决方案

问题背景

在JeecgBoot项目v3.7.1版本中，BasicTable组件的树形表格功能出现了一个关键性问题：当设置checkStrictly属性为false时，父子节点之间的勾选状态无法实现联动效果。这个问题直接影响了树形表格的核心交互体验，使得用户无法通过勾选父节点自动选中所有子节点，或者通过勾选子节点自动更新父节点的选中状态。

问题分析

树形表格的层级关联选择功能是前端开发中常见的需求，它通常需要实现以下两个核心逻辑：

1. 向下联动：当用户勾选父节点时，自动选中所有子节点
2. 向上联动：当用户勾选/取消勾选子节点时，自动更新父节点的选中状态

在JeecgBoot的实现中，checkStrictly属性本应控制这种层级关联行为。当设置为false时，应该启用父子联动；当设置为true时，则保持各节点独立选择。但实际使用中发现，即使明确设置checkStrictly为false，联动效果仍然失效。

技术实现原理

要实现完整的树形表格选择联动，需要考虑以下几个技术要点：

1. 递归处理子节点：当父节点被选中时，需要递归遍历所有子节点并更新其选中状态
2. 查找父节点链：当子节点状态变化时，需要向上查找所有父节点并判断是否需要更新
3. 状态一致性检查：需要判断父节点下的所有子节点是否都被选中，以决定是否选中父节点

解决方案

开发团队针对此问题提供了完整的修复方案，主要包含三个核心函数：

1. onSelectChild函数：负责处理向下联动，递归选中/取消选中所有子节点
2. onSelectParent函数：负责处理向上联动，查找并更新父节点链的选中状态
3. updateSelected函数：负责实际更新单个节点的选中状态

关键代码解析

// 向下联动处理子节点
function onSelectChild(record, checked) {
  if (满足树形表格且非严格模式条件) {
    if (存在子节点) {
      record.children.forEach((child) => {
        updateSelected(child, checked); // 更新子节点状态
        if (child.children?.length) {
          onSelectChild(child, checked); // 递归处理
        }
      });
    }
  }
}

// 向上联动处理父节点
function onSelectParent(record, checked) {
  if (满足树形表格且非严格模式条件) {
    let condition = true,
      currentRecord = record;
    while (condition) {
      const parentRecord = findParent(currentRecord); // 查找父节点
      if (parentRecord) {
        if (checked) {
          // 选中时检查是否所有子节点都被选中
          const allChildrenSelected = 检查逻辑;
          allChildrenSelected && updateSelected(parentRecord, true);
        } else {
          // 取消选中时直接取消父节点
          updateSelected(parentRecord, false);
        }
        // 判断是否继续向上查找
        condition = 判断逻辑;
      } else {
        condition = false;
      }
    }
  }
}

查找父节点算法

解决方案中实现了一个高效的父节点查找算法，该算法采用深度优先搜索策略：

function findParent(tree, record, childrenKey = 'children') {
  let parent = null;
  function search(nodes) {
    for (let node of nodes) {
      if (node[childrenKey]?.some(child => child.id === record.id)) {
        parent = node;
        return true;
      }
      if (node[childrenKey] && search(node[childrenKey])) {
        return true;
      }
    }
    return false;
  }
  search(tree);
  return parent;
}

实际效果

修复后的树形表格实现了完整的层级关联选择功能：

1. 勾选父节点时，自动选中所有子节点
2. 取消勾选父节点时，自动取消所有子节点
3. 当勾选某个子节点时，如果其所有兄弟节点都被选中，则自动选中父节点
4. 当取消勾选某个子节点时，自动取消所有父节点的选中状态

这种实现方式既保证了用户体验的连贯性，又确保了数据状态的一致性，是树形表格交互的标准解决方案。

总结

JeecgBoot团队对此问题的修复展示了完整的前端树形结构处理方案，涵盖了递归、深度优先搜索等核心算法，以及状态一致性维护等关键技术点。这个案例也为其他开发者处理类似树形表格选择联动问题提供了很好的参考。