如何判断subgrid当前是否处于显示状态

下面是几种生产环境可用的方案，覆盖不同的使用场景：

• 原生DOM判断方案（无框架/库依赖通用）
  不要只靠读display/visibility属性判断，父容器隐藏、元素移出可视区的场景下单一属性判断会出错，组合两个判断逻辑就能覆盖99%的CSS控制显隐场景：

  // 替换成你的subgrid对应的DOM选择器
  const subgridNode = document.querySelector('.your-subgrid-selector');
  const computedStyle = window.getComputedStyle(subgridNode);
  // 既不是display:none，也不是visibility:hidden，同时实际渲染有宽高占位，才是真的显示状态
  const isSubgridShow = computedStyle.display !== 'none' 
    && computedStyle.visibility !== 'hidden'
    && subgridNode.offsetWidth > 0 
    && subgridNode.offsetHeight > 0
  

• 组件内置API方案（适用于使用成熟grid组件库的场景）
  如果你用的是jqGrid、ag-Grid、EasyUI这类自带subgrid/明细行功能的表格库，不要自己手动查DOM，直接用组件暴露的方法判断即可：
  • jqGrid环境可直接用$(subgridSelector).is(':visible')判断，也可以通过getGridParam方法读取内部存储的展开状态
  • ag-Grid环境可通过gridApi.getDetailGridInfo(rowId)判断对应行的subgrid是否处于展开渲染状态
    这类组件一般都自带展开/折叠的事件回调，直接在回调里写父grid尺寸调整逻辑就行，比主动查状态性能更好。
• 自定义状态同步方案（适用于自己控制subgrid显隐逻辑的场景）
  如果subgrid的展开、折叠逻辑完全是你自己业务代码控制的，完全没必要查DOM或者调API，直接在控制显隐的变量变更时同步状态就好：比如点击展开按钮把isSubgridOpen设为true的时候，直接触发父grid的resize方法，少一层DOM查询性能更高。

实操提示：触发父grid尺寸调整的时候建议加30~100ms的延迟，等subgrid的展开动画、DOM渲染完全完成后再执行重算，否则很容易出现父grid高度计算偏差、滚动条错位的问题。不要用定时器轮询subgrid状态，会造成不必要的性能开销，优先绑定显隐切换的事件钩子来触发逻辑。

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