Jeecg-Boot中BasicTable树形表格checkStrictly属性解析与优化

在Jeecg-Boot项目v3.7.1版本中，BasicTable组件树形表格的checkStrictly属性功能存在一个值得关注的技术问题。本文将深入分析该问题的技术背景、解决方案以及实现原理。

问题背景

BasicTable作为Jeecg-Boot中的核心表格组件，支持树形结构数据展示。checkStrictly属性本应控制树形表格中父子节点选择状态的联动关系：当设置为false时，选中父节点应自动选中所有子节点，反之亦然。但在v3.7.1版本中，这一功能未能按预期工作。

技术分析

问题的核心在于表格组件的选择状态管理逻辑。在树形结构中，节点的选择状态需要遵循以下规则：

1. 当选中父节点时，应递归选中所有子节点
2. 当取消选中子节点时，应向上检查并可能取消父节点的选中状态
3. 当所有子节点都被选中时，应自动选中父节点

解决方案实现

项目维护者通过三个关键函数实现了完整的树形选择联动逻辑：

1. onSelectChild函数

该函数负责向下递归处理子节点的选择状态：

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

2. onSelectParent函数

该函数负责向上处理父节点的选择状态：

function onSelectParent(record, checked) {
  if (满足树形表格且非严格模式条件) {
    let condition = true, currentRecord = record;
    while (condition) {
      const parentRecord = findParent(tableData, currentRecord);
      if (parentRecord) {
        const childrenKeys = parentRecord.children.map(getRecordKey);
        if (checked) {
          // 选中时检查是否所有子节点都被选中
          const allSelected = childrenKeys.every(key => selectedKeys.includes(key));
          allSelected && updateSelected(parentRecord, checked);
        } else {
          // 取消选中时直接取消父节点
          updateSelected(parentRecord, checked);
        }
        // 终止条件判断
        condition = !tableData.find(item => getRecordKey(item) === getRecordKey(parentRecord));
        currentRecord = parentRecord;
      } else {
        condition = false;
      }
    }
  }
}

3. findParent辅助函数

该函数实现了在树形结构中查找父节点的功能：

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

实现效果

通过上述改进，树形表格的选择联动功能现在可以完美实现：

1. 选中父节点时，自动选中所有子节点
2. 取消选中子节点时，自动取消父节点选中状态
3. 当所有子节点都被选中时，自动选中父节点
4. 支持多层级树形结构的联动选择

技术要点总结

1. 递归处理：对于树形结构，采用递归方式处理子节点是常见且有效的方法
2. 双向绑定：不仅需要处理向下的子节点选择，还需要处理向上的父节点状态更新
3. 性能考虑：在查找父节点时，采用了深度优先搜索算法，确保效率
4. 状态一致性：通过严格的判断条件保证选择状态的一致性和准确性

该问题的解决展示了Jeecg-Boot团队对组件细节的关注和对用户体验的重视，也为开发者处理类似树形结构选择问题提供了很好的参考范例。