如何在WebDataRocks中使用expandAll时禁用表头折叠功能？

你可以通过以下几种方式实现需求，其中官方事件拦截的方式最可靠，也可以在handlerCustomCell中直接操作DOM实现：

方法一：利用官方事件钩子（推荐） #

WebDataRocks提供了beforecollapse和beforeexpand事件，直接返回false就能阻止折叠/展开操作，配合expandAll: true的配置，就能保持所有行/列始终展开：

var pivot = new WebDataRocks({
  container: "#wdr-component",
  height: "800px",
  width: "100%",
  report: {
    // 原有report配置不变
  },
  global: {
    // 原有global配置不变
  },
  customizeCell: handlerCustomCell,
  // 添加以下事件拦截
  beforecollapse: function() {
    return false; // 完全阻止折叠操作
  },
  beforeexpand: function() {
    return false; // 阻止展开（因为已设置expandAll，可按需保留）
  }
});

方法二：在handlerCustomCell中直接实现 #

如果需要针对特定表头单元格禁用，可以在自定义单元格函数中移除点击事件、禁用交互并隐藏折叠箭头：

function handlerCustomCell(cell, data) {
  // 仅处理行/列的表头单元格
  if (data.type === "header" && data.hierarchy) {
    const cellElement = cell.element;
    // 克隆节点移除原有绑定的折叠事件
    const newCell = cellElement.cloneNode(true);
    cellElement.parentNode.replaceChild(newCell, cellElement);
    // 禁用点击交互
    newCell.style.pointerEvents = "none";
    // 移除折叠/展开箭头图标
    const arrowIcon = newCell.querySelector(".wdr-icon");
    if (arrowIcon) arrowIcon.remove();
  }
}

方法三：全局CSS禁用 #

如果不需要区分表头，直接全局禁用所有折叠交互，添加以下CSS即可：

/* 禁用表头折叠元素的点击 */
.wdr-grid-header .wdr-expanded, .wdr-grid-header .wdr-collapsed {
  pointer-events: none !important;
}
/* 隐藏折叠箭头图标 */
.wdr-grid-header .wdr-icon {
  display: none !important;
}

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