在 SpreadJS 中实现工作表导航：从数据获取到交互设计

置顶葡萄城技术团队

已于 2025-08-05 10:23:36 修改

阅读量679

点赞数 7

CC 4.0 BY-SA版权

分类专栏： SpreadJS表格控件入门指南文章标签： xhtml ui 前端 javascript

于 2025-08-05 10:23:07 首次发布

本文链接：https://blog.csdn.net/powertoolsteam/article/details/149930901

SpreadJS表格控件入门指南专栏收录该内容

153 篇文章

订阅专栏

前言

Microsoft Excel工作表导航功能能够提取工作簿内每个工作表中的表格（Table）、数据透视表（PivotTable）、图表（Chart）、图片、形状（Shape）等元素，并将其摘要信息以树的形式罗列显示，当点击某元素信息时，工作簿跳转至该元素所在工作表，并聚焦在该元素上，如图1所示。

（图1. Excel 工作表导航）

那么SpreadJS是否支持自定义开发实现该功能呢？撰写本文的目的正是为了介绍在SpreadJS中如何利用现有功能或产品设计自定义开发实现该功能，因此答案显然是“支持”。接下来，我们一起走进工作表导航自定义实现方案。

我们来分析下工作表导航功能的要素，参考Microsoft Excel官网对该功能的介绍，包含以下需求项：

罗列工作簿内每个工作表中的元素。
点击某元素可以跳转至相关工作表并聚焦该元素。
导航面板支持模糊搜索匹配工作表元素。

首先，需要确定SpreadJS是否能够获取工作表中的上述元素信息。SpreadJS对上述元素均抽象了独立的管理器，比如TableManager管理Table实例，PivotTableManager管理PivotTable实例，ChartCollection管理Chart实例、ShapeCollection管理Shape实例，如图2所示。由于17.0.0版本优化了图表Chart实现，图表不再是基于DOM元素的浮动对象，而是作为一种形状存在，所以图表Chart实例也可由ShapeCollection管理。以上，便可确定，通过各类型元素的管理器便可获取工作表中对应类型的各元素。

（图2. 工作表元素管理）

其次，各类型元素的管理器可以以元素名称为检索依据快速获取元素实例。以Table为例，TableManager:findByName()根据Table名称获取Table实例，Table实例中包含了Table所在单元格区域，Worksheet:setSelection()便可选中区域，聚焦该区域。PivotTable同理，PivotTable整体布局在工作表中，占据一片连续的单元格区域，通过PivotTable:getRange()即可得到数据透视表所在单元格区域。形状Shape实体悬浮在工作表图层上一层，并不占据单元格，便无法通过Worksheet:setSelection()聚焦。然而，ShapeBase:isSelected()可聚焦选中调用者形状实例

至此，SpreadJS便提供了完整的工作表元素管理能力，凭借此能力可以增删和访问元素。如何以树的形式布局这些元素，呈现一个清晰直观的树结构，以供用户快速了解工作表以及工作簿元素组成全貌呢？此外，如何同时提供交互能力呢？

我们来看一下Microsoft Excel中工作表导航的布局结构，如图3所示，工作表视图区域右侧显示一设置面板，面板内自上而下分为两部分，包括搜索输入栏和工作表元素信息列表树。

（图3. 工作表导航面板）

我们知道SpreadJS中的各个设置面板均为IDialogTemplate实例，且SpreadJS公开了IDialogTemplate结构标准以支持自定义扩展。在此，我们可以参考AtmoicComponentBase标准自定义原子组件，这便是工作表元素列表树的布局容器，在容器内自上而下依次创建DOM元素封装每一级树节点，以形成工作表树元素列表树。树包括两级节点，父节点显示工作表名称，代表一个工作表实例；相应地，子节点即工作表内的诸多元素名称。在定义工作表元素布局的同时，定义搜索框的模糊搜索逻辑，展开父节点以显示符合搜索关键字的匹配项，当键入或删除新字符后导致当前匹配项中部分项不再匹配时，隐藏相关项并折叠无匹配项的父节点。

工作表导航面板既已实现，再考虑该面板显示与否的控制要求。Microsoft Excel的工作表导航功能位于工具栏–>视图–>显示–>导航，参考此路径，在工具栏–>视图选项卡中新增自定义功能按钮，设置图标以诉诸该图标为工作表导航功能按钮，如图4所示。

（图4. 工作表导航按钮）

对该自定义功能按钮定义相应的命令，在该按钮被点击时触发，通过切换工作表导航面板对应的命令的visibleContext属性值控制面板可见性。

至此，便利用SpreadJS的元素管理能力自定义实现了与Microsoft Excel相似的工作表导航功能，如图5所示。附上demo，以供参考。

（图5. SpreadJS 工作表导航）

工作表导航demo（Html）

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>工作表导航</title>
    <meta name="spreadjs culture" content="zh-cn"/>
    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.18.1.0.css"
          rel="stylesheet" type="text/css"/>
    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.designer.18.1.0.min.css" rel="stylesheet"
          type="text/css"/>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.18.1.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.shapes.18.1.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.charts.18.1.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.slicers.18.1.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.print.18.1.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.barcode.18.1.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.pdf.18.1.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.pivot.pivottables.18.1.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.tablesheet.18.1.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.ganttesheet.18.1.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.report.reportsheet.18.1.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.formulapanel.18.1.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.io.18.1.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.18.1.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/resources/zh/gc.spread.sheets.resources.zh.18.1.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.designer.resource.cn.18.1.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.designer.all.18.1.0.min.js"></script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">

    <style>
        .sample-tutorial {
            position: relative;
            height: 100%;
            overflow: hidden;
        }
        body {
            position: absolute;
            margin: 0;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .gc-across-sheet-ftb {
            z-index: -1 !important;
        }

        .gc-across-sheet-func-popup {
            z-index: -1 !important;
        }

        .sheet-name-container {
            width: 80%;
            height: 50px;
            display: block;
            margin-top: 5px;
            background-color: white;
        }

                .tree-container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            padding: 16px;
            margin-top: 24px;
        }
        
        .tree-node {
            margin-bottom: 8px;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .node-header {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            background-color: #f1f5f9;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .node-header:hover {
            background-color: #e2e8f0;
        }
        
        .toggle-btn {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #dbeafe;
            color: #3b82f6;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            transition: transform 0.3s;
            border: none;
            cursor: pointer;
        }
        
        .node-header.expanded .toggle-btn {
            transform: rotate(45deg);
        }
        
        .node-name {
            font-weight: 500;
        }
        
        .node-children {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            padding-left: 36px;
            position: relative;
        }
        
        .node-children::before {
            content: '';
            position: absolute;
            left: 12px;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: #e2e8f0;
        }
        
        .child-item {
            padding: 8px 12px;
            margin: 4px 0;
            background-color: #f8fafc;
            border-radius: 4px;
            transition: background-color 0.2s;
        }
        
        .child-item:hover {
            background-color: #f1f5f9;
        }
        
        .child-item.selected {
            background-color: #e0f2fe;
            border-left: 3px solid #3b82f6;
        }
        
        .empty-message {
            padding: 8px 12px;
            color: #64748b;
            font-style: italic;
        }
    </style>

</head>

<body>
    <div class="sample-tutorial">
        <div class="demo-options">
            <div class="option-row">
                <div id="formulaBar" contenteditable="true" spellcheck="false"
                    style="font-family: Calibri;border: 1px solid #808080;width:100%;box-sizing: border-box;"></div>
            </div>
        </div>
        <div id="ss" style="width:100%; height: calc(100% - 20px)"></div>
    </div>
</body>

<script>

window.onload = function () {
    var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById('ss'));
    var spread = designer.getWorkbook();
    spread.setSheetCount(4);

    initSpread(spread);

    initNavigator(designer);
};

function initSpread(spread) {
    var sheet1 = spread.getSheet(0);
    sheet1.setArray(0, 0, [
        ['名称', '数值'], 
        ['A', 1], 
        ['B', 2], 
        ['C', 3], 
        ['D', 4]
    ]);
    //  数据透视表
    var pivotTable = sheet1.pivotTables.add('pivottable1', '=Sheet1!A1:B3', 5, 0, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium2);
    pivotTable.add('名称', '名称', GC.Spread.Pivot.PivotTableFieldType.rowField);
    pivotTable.add('数值', '数值', GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);

    var sheet2 = spread.getSheet(1);
    sheet2.setArray(0, 0, [
        ['属性1', '属性2', '属性3', '属性4'], 
        [1, 2, 3, 4], 
        [2, 3, 4, 5]
    ]);
    //  表格Table
    sheet2.tables.add('table', 0, 0, 3, 4);

    sheet2.setArray(7, 0, [
        ['属性1', '属性2', '属性3', '属性4'], 
        [1, 2, 3, 4], 
        [2, 3, 4, 5]
    ]);
    //  表格Table
    sheet2.tables.add('table2', 7, 0, 4, 4);

    var sheet3 = spread.getSheet(2);
    sheet3.setArray(0, 0, [
        [1, 2, 3, 4], 
        [1, 2, 3, 4]
    ]);
    //  区域快照
    var cameraShape = sheet3.shapes.addCameraShape('CameraShape', 'Sheet3!A1:D2', 240, 200);
    //  图片
    var imgShape = sheet3.shapes.addPictureShape('pic1', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAWtJREFUSEvt1r1KHWEQxvGfH50Saz+iuYWINyGx00sIplAD6QzpYikWohC0tLcSEu9BorcgMailiqQy6Bl4V45HX9w9RzzNvu3OzDPPf2f23R5dOj1d0lULvxr5GnWB+gO2MNoh+7+Yx6/WOjnUJxjrULRIj1rjZYVvU+AQrtpsYADXKfeRwZzjS7xpYDrFZ+xWFJ/BJibwD9HEg5MTHsE65lL0Hhbx55kGYiYibzbF/cQCjssKNw9ZdP4udf4da7hpKdSLjw1nq4nUGZaxk2s05/gHvuIiYQrBQN6PwzSpv1PRybQBU/iPyP2WZmMQK/hS1nEM13mj4HBTwntsoxAIEhG31CjehyN8wkFTTryatzy+E3KOi6lufd6KNDRieHKvIFcneztlE5Kb2PGN5CQcx64+dV5cuOx21cL3pKoOV1nERVxl1F27JKbTznZ6Q4WBuBb3y35AqiKtHF//+lRG1m5CjbpdcpXz7gDWz0QfNVlZrQAAAABJRU5ErkJggg==', 100, 100, 200, 200);
    //  普通形状
    var baseShape = sheet3.shapes.add("heartShape", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 50, 100, 150);

    var sheet4 = spread.getSheet(3);
    sheet4.setArray(0, 0, [
        ['名称', '数值'], 
        ['A', 1], 
        ['B', 2], 
        ['C', 3], 
        ['D', 4]
    ]);
    //  图表
    var chart = sheet4.charts.add('名称-数值-柱状图', GC.Spread.Sheets.Charts.ChartType.columnClustered, 0, 100, 400, 300, 'A1:B5');
}

/**
 * 初始化sheet导航功能及其相关元素（工具栏功能按钮、导航面板）
*/
function initNavigator(designer) {
    var config = GC.Spread.Sheets.Designer.DefaultConfig;

    GC.Spread.Sheets.Designer.Designer.RegisterComponent('MyComponent', MyTemplateComponent);

    //  定义命令控制sheet导航面板显示与否
    config.commandMap = {
        SheetNaviCmd: {
            title: 'SheetNavi', 
            text: 'sheet导航', 
            iconClass: "ribbon-button-zoom", 
            bigButton: 'false', 
            commandName: 'SheetNavi', 
            execute: async (context, propertyName) => {
                if (context.getData('CData')) {
                    context.setData('CData', false);
                } else {
                    context.setData('CData', true);
                }
            }
        }
    }

    //  在工具栏“视图”选项卡添加sheet导航功能按钮
    config.ribbon[5].buttonGroups.unshift({
        'label': '自定义sheet导航', 
        'thumbnailClass': 'ribbon-thumbnail-chart-alt-text',
        'commandGroup': {
            'children': [
                {
                    'direction': 'vertical', 
                    'commands': [
                        'SheetNavi'  //  与命令的commandName相同
                    ]
                }
            ]
        }
    });

    //  定义sheet导航面板
    var searchTemplate = {
        templateName: 'searchTemplate', 
        content: [
            {
                type: 'TextBlock', 
                style: 'margin:10px;font-size:20px;font-weight:lighter;color:#08892c', 
                text: '导航'
            }, 
            {
                type: 'Container', 
                children: [
                    {
                        type: 'Container', 
                        margin: '10px 5px', 
                        children: [
                            {
                                type: 'MyComponent',  //  自定义Template控件，提供工作表导航信息布局能力
                                bindingPath: 'myComponentProcess'
                            }
                        ]
                    }
                ]
            }
        ]
    };

    GC.Spread.Sheets.Designer.registerTemplate('searchTemplate', searchTemplate);


    //  导航面板命令
    var sidePanelAuditCommands = {
        searchPanelCommand: {
            comamndName: 'searchPanelCommand', 
            enableContext: 'AllowEditObject', 
            visibleContext: 'CData'  //  导航面包显示控制属性
        }
    };

    //  Template配置
    var searchPanelConfig = {
        position: 'right', 
        width: '315px', 
        command: 'searchPanelCommand', 
        uiTemplate: 'searchTemplate', 
        showCloseButton: true
    };

    Object.assign(config.commandMap, sidePanelAuditCommands);
    config.sidePanels.push(searchPanelConfig);

    designer.setConfig(config);
}

function MyTemplateComponent() {
    console.log('MyTemplateComponent, constructor');
    GC.Spread.Sheets.Designer.AtomicComponentBase.call(this, ...arguments);
    this.inputContent = 0;
}

MyTemplateComponent.prototype = new GC.Spread.Sheets.Designer.AtomicComponentBase();
MyTemplateComponent.prototype.getTemplate = function(template) {
    console.log('MyTemplateComponent, getTemplate: ', template);
    var innerHTML = '<div id=\"sheetContainer\" class=\"sheet-info-container\"></div>';
    return innerHTML;
}

MyTemplateComponent.prototype.onMounted = function(host, options) {
    console.log('MyTemplateComponent, onMounted, host: ', host, '\noptions: ', options);
    var hostDesigner = GC.Spread.Sheets.Designer.findControl('ss');
    var hostSpread = hostDesigner.getWorkbook();
    console.log('sheet count: ', hostSpread.getSheetCount());

    var sheetNameContainer = document.createElement('div');
    sheetNameContainer.className = 'tree-container';

    // 创建搜索输入框
    var searchInput = document.createElement('input');
    searchInput.type = 'text';
    searchInput.placeholder = '搜索表格、图表等...';
    searchInput.style.cssText = `
        display: block;
        margin-bottom: 16px;
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
    `;
    sheetNameContainer.appendChild(searchInput);

    // 生成树形结构
    for (var i = 0; i < hostSpread.getSheetCount(); i++) {
        // 创建节点容器
        var treeNode = document.createElement('div');
        treeNode.className = 'tree-node';
        treeNode.dataset.sheetIndex = i;
        
        // 创建节点头部
        var nodeHeader = document.createElement('div');
        nodeHeader.className = 'node-header';

        // 创建展开/折叠按钮
        var toggleBtn = document.createElement('button');
        toggleBtn.className = 'toggle-btn';
        toggleBtn.innerHTML = '<i class="fa fa-plus text-xs"></i>';

        // 创建节点名称
        var nodeName = document.createElement('span');
        nodeName.className = 'node-name';
        nodeName.innerText = hostSpread.getSheet(i).name();

        // 组装节点头部
        nodeHeader.appendChild(toggleBtn);
        nodeHeader.appendChild(nodeName);

        // 为节点头部添加点击事件（切换sheet）
        nodeHeader.addEventListener('click', function(e) {
            if (e.target.closest('.toggle-btn')) return; // 跳过按钮点击
            e.stopPropagation();
            const sheetName = this.querySelector('.node-name').textContent;
            hostSpread.setActiveSheet(sheetName);
        });

        // 为按钮添加点击事件（展开/折叠）
        toggleBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            const node = this.closest('.tree-node');
            const children = node.querySelector('.node-children');
            const icon = this.querySelector('i');
            
            if (node.classList.contains('expanded')) {
                // 折叠节点
                children.style.maxHeight = '0px';
                node.classList.remove('expanded');
                icon.classList.replace('fa-minus', 'fa-plus');
            } else {
                // 展开节点
                const height = children.scrollHeight;
                children.style.maxHeight = height + 'px';
                node.classList.add('expanded');
                icon.classList.replace('fa-plus', 'fa-minus');
            }
        });

        // 创建子节点容器
        var childrenNode = document.createElement('div');
        childrenNode.className = 'node-children';

        // 创建子节点内容
        var childrenContent = document.createElement('div');
        initTreeNode(hostSpread, i, childrenContent);

        // 组装子节点
        childrenNode.appendChild(childrenContent);

        // 组装完整节点
        treeNode.appendChild(nodeHeader);
        treeNode.appendChild(childrenNode);

        // 添加到容器
        sheetNameContainer.appendChild(treeNode);
    }

    var container = document.getElementById('sheetContainer');
    if (container.childElementCount === 1) {
        container.appendChild(document.createElement('br'));
    }
    container.appendChild(sheetNameContainer);

    // 添加搜索功能
    searchInput.addEventListener('input', function(e) {
        const searchText = e.target.value.toLowerCase();
        const treeNodes = sheetNameContainer.querySelectorAll('.tree-node');
        
        treeNodes.forEach(node => {
            const nodeName = node.querySelector('.node-name').innerText.toLowerCase();
            const nodeChildren = node.querySelector('.node-children');
            const childItems = nodeChildren.querySelectorAll('.child-item');
            
            // 检查当前节点名称是否匹配
            const nodeMatch = nodeName.includes(searchText);
            
            // 检查子项是否匹配
            let childMatch = false;
            childItems.forEach(item => {
                const itemText = item.innerText.toLowerCase();
                const match = itemText.includes(searchText);
                item.style.display = match ? '' : 'none';
                if (match) childMatch = true;
            });
            
            // 根据匹配结果显示或隐藏节点
            if (nodeMatch || childMatch) {
                node.style.display = '';
                
                // 如果有子项匹配，自动展开节点
                if (childMatch && searchText) {
                    node.classList.add('expanded');
                    const toggleBtn = node.querySelector('.toggle-btn');
                    const icon = toggleBtn.querySelector('i');
                    icon.classList.replace('fa-plus', 'fa-minus');
                    nodeChildren.style.maxHeight = nodeChildren.scrollHeight + 'px';
                } else if (!searchText) {
                    // 搜索框为空时，恢复初始折叠状态
                    node.classList.remove('expanded');
                    const toggleBtn = node.querySelector('.toggle-btn');
                    const icon = toggleBtn.querySelector('i');
                    icon.classList.replace('fa-minus', 'fa-plus');
                    nodeChildren.style.maxHeight = '0px';
                }
            } else {
                node.style.display = 'none';
            }
        });
    });
}

// 辅助函数：创建树节点内容
function initTreeNode(hostSpread, sheetIndex, container) {
    var tempSheet = hostSpread.getSheet(sheetIndex);
    
    // 添加表格
    tempSheet.tables.all().forEach(table => {
        var childItem = document.createElement('div');
        childItem.className = 'child-item';
        childItem.innerText = table.name();
        childItem.dataset.type = 'table';
        childItem.addEventListener('click', function() {
            const nodeName = this.closest('.tree-node').querySelector('.node-name').textContent;
            hostSpread.setActiveSheet(nodeName);
            changeSheet(hostSpread.getActiveSheet(), 'table', table.name());
        });
        container.appendChild(childItem);
    });

    // 添加数据透视表
    tempSheet.pivotTables.all().forEach(pivotTable => {
        var childItem = document.createElement('div');
        childItem.className = 'child-item';
        childItem.innerText = pivotTable.name();
        childItem.dataset.type = 'pivotTable';
        childItem.addEventListener('click', function() {
            const nodeName = this.closest('.tree-node').querySelector('.node-name').textContent;
            hostSpread.setActiveSheet(nodeName);
            changeSheet(hostSpread.getActiveSheet(), 'pivotTable', pivotTable.name());
        });
        container.appendChild(childItem);
    });

    // 添加形状
    tempSheet.shapes.all().forEach(shape => {
        var childItem = document.createElement('div');
        childItem.className = 'child-item';
        childItem.innerText = shape.name();
        childItem.dataset.type = 'shape';
        childItem.addEventListener('click', function() {
            const nodeName = this.closest('.tree-node').querySelector('.node-name').textContent;
            hostSpread.setActiveSheet(nodeName);
            changeSheet(hostSpread.getActiveSheet(), 'shape', shape.name());
        });
        container.appendChild(childItem);
    });
}


/**
 * 创建树最底层节点，即叶子节点，表示sheet中的图表、形状、Table、数据透视表等
*/
function initTreeNode(hostSpread, sheetIndex, childrenContent) {
    var tempSheet = hostSpread.getSheet(sheetIndex);
    var tableInfos = getSheetTableInfo(tempSheet);
    if (tableInfos && tableInfos.length > 0) {
        tableInfos.forEach(tableInfo => {
            childrenContent.appendChild(createChildItem(tableInfo, hostSpread));
        });
    }

    var pivotTablesInfo = getSheetPivotTablesInfo(tempSheet);
    if (pivotTablesInfo && pivotTablesInfo.length > 0) {
        pivotTablesInfo.forEach(pivotTable => {
            childrenContent.appendChild(createChildItem(pivotTable, hostSpread));
        });
    }

    var shapesInfo = getSheetShapesInfo(tempSheet);
    console.log('shapesInfo: ', shapesInfo);
    if (shapesInfo && shapesInfo.length > 0) {
        shapesInfo.forEach(shape => {
            childrenContent.appendChild(createChildItem(shape, hostSpread));
        });
    }
}

/**
 * 获取Table摘要
*/
function getSheetTableInfo(sheet) {
    var tablesInfo = [];
    sheet.tables.all().forEach(table => {
        tablesInfo.push({
            type: 'table',
            name: table.name(), 
            range: table.range()
        });
    })

    return tablesInfo;
}

/**
 * 获取PivotTable摘要
*/
function getSheetPivotTablesInfo(sheet) {
    var pivotTablesInfo = [];
    sheet.pivotTables.all().forEach(pivotTable => {
        pivotTablesInfo.push({
            type: 'pivotTable',
            name: pivotTable.name(), 
            range: pivotTable.getRange()?.content
        });
    });

    return pivotTablesInfo;
}

/**
 * 获取Shape摘要（形状、图表、区域快照、图片都属于Shape）
*/
function getSheetShapesInfo(sheet) {
    var shapesInfo = [];
    sheet.shapes.all().forEach(shape => {
        shapesInfo.push({
            type: 'shape', 
            name: shape.name()
        });
    });

    return shapesInfo;
}

/**
 * 创建childItem
*/
function createChildItem(info, hostSpread) {
    var childItem = document.createElement('div');
    childItem.className = 'child-item';
    childItem.innerText = info.name;
    childItem.dataset.type = info.type;
    childItem.addEventListener('click', function() {
        console.log('child item clicked');
        //  获取子元素对应的sheet名称
        var nearestNodeChildren = this.closest('.node-children');
        var nearestNodeHeader = nearestNodeChildren.previousElementSibling;
        var nodeNameElement = nearestNodeHeader.querySelector('.node-name');
        var nodeName = nodeNameElement.textContent;
        console.log('node name---: ', nodeName);

        //  跳转sheet后选中相应的元素
        hostSpread.setActiveSheet(nodeName);
        var curSheet = hostSpread.getActiveSheet();
        changeSheet(curSheet, this.dataset.type, this.innerText);
    });

    return childItem;
}

/**
 * 切换sheet，并选中sheet中的指定元素
*/
function changeSheet(sheet, elementType, elementName) {
    console.log('elementType: ', elementType, ', elementName: ', elementName);
    if (elementType === 'table') {
        selectTable(sheet, elementName);
    } else if (elementType === 'pivotTable') {
        selectPivotTable(sheet, elementName);
    } else if (elementType === 'chart') {
        selectChart(sheet, elementName);
    } else if (elementType === 'shape') {
        selectShape(sheet, elementName);
    }
}

/**
 * 选中Table
*/
function selectTable(sheet, tableName) {
    var table = sheet.tables.findByName(tableName);
    if (table) {
        var range = table.range();
        sheet.setSelection(range.row, range.col, range.rowCount, range.colCount);
    }
}

/**
 * 选中数据透视表
*/
function selectPivotTable(sheet, pivotTableName) {
    var range = sheet.pivotTables.get(pivotTableName)?.getRange().content;
    if (range) {
        sheet.setSelection(range.row, range.col, range.rowCount, range.colCount);
    }
}

/**
 * 选中形状
*/
function selectShape(sheet, shapeName) {
    sheet.shapes.all().forEach(shape => {
        if (shape.name() === shapeName) {
            shape.isSelected(true);
        } else {
            shape.isSelected(false);
        }
    });
}


   </script>
</html>