icCube Reporting V6：如何在Filter组件中移除层级的指定层级？

我明白你遇到的困扰：标准组件能轻松隐藏层级结构里的部分层级，但Filter组件默认只能选择单个层级作为成员展示，没法直接视觉上移除中间的某些层级。这里有两个实用的方法帮你实现需求：

方法一：自定义CSS样式隐藏指定层级 #

icCube的Filter组件会给不同层级的元素分配特定的CSS类名（比如ic3-filter-level-0对应第一层级，ic3-filter-level-1对应第二层级，以此类推）。你可以通过添加自定义CSS来隐藏不需要的层级：

1. 打开报表的Settings（设置）面板，找到Custom CSS选项
2. 输入类似下面的代码，根据你要隐藏的层级调整类名：

/* 隐藏第二层级（level-1）的所有元素 */
.ic3-filter-level-1 {
    display: none !important;
}

/* 如果需要隐藏层级之间的连接线，也可以加上这个 */
.ic3-filter-tree-line.ic3-filter-line-level-1 {
    display: none !important;
}

3. 保存设置后刷新报表，对应的层级就会被隐藏。

方法二：使用JavaScript API动态控制 #

如果需要更灵活的控制（比如根据条件动态显示/隐藏层级），可以用icCube的JavaScript API来操作Filter组件：

1. 在报表的Settings里找到Custom JavaScript选项
2. 输入类似下面的代码，替换YOUR_FILTER_COMPONENT_ID为你的Filter组件实际ID：

ic3.onReportLoaded(function() {
    const filterComp = ic3.report.getComponentById("YOUR_FILTER_COMPONENT_ID");
    if (!filterComp) return;

    // 监听Filter组件的渲染完成事件
    filterComp.onRendered(function() {
        // 隐藏第三层级（level-2）
        const levelElements = document.querySelectorAll(".ic3-filter-level-2");
        levelElements.forEach(el => el.style.display = "none");
        // 同时隐藏对应层级的连接线
        const lineElements = document.querySelectorAll(".ic3-filter-line-level-2");
        lineElements.forEach(el => el.style.display = "none");
    });
});

3. 保存后测试，Filter组件里指定的层级就会被隐藏。

注意事项 #

• CSS类名可能会随icCube版本小幅度调整，建议用浏览器开发者工具查看Filter组件的DOM结构，确认目标层级的类名
• 使用JavaScript方法时，要确保组件ID正确，避免找不到组件的情况
• 这两种方法都是视觉上隐藏层级，不会影响Filter的实际筛选逻辑，底层的层级数据依然存在

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