页面树结构
转至元数据结尾
转至元数据起始

提示:本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配(如报表使用冻结,或多个宏代码冲突等),需根据实际需求开发代码。

示例说明

当报表展示的列过多的时候,默认初始化的时候隐藏部份列,当有需要的时候再点击“+”加号进行显示隐藏的列。

默认初始化的时,隐藏部分列,如下图:


设置方法

1、首先在电子表格设计器(Microsoft Office Excel)中,创建电子表格报表。

2、在浏览器的“分析展现”节点下,选中电子表格,右键选择 编辑宏 进入报表宏界面,双击该节点进入报表宏编辑界面。

3、在报表宏界面新建客户端模块。在弹出的新建模块对话框中,选择对象为spreadSheetReport、事件为onRender、并把下面宏代码复制到代码编辑区域。


宏类型

类型

对象

事件

ClientSide

spreadsheetReport

onRender


宏代码

function main(spreadsheetReport, isAjaxRefreshCallback) {
    var cell = spreadsheetReport.getCell("B3"); //"+"所在单元格
    cell.collapsed = false;
    var expander = cell.ownerDocument.createElement("SPAN");
    expander.innerHTML = "+";
    expander.style.cursor = "pointer";
    cell.insertBefore(expander, cell.firstChild);
    var table = cell.parentNode.parentNode.parentNode;
    var width = parseInt(table.offsetWidth);
    expander.onclick = function() {
        if (cell.collapsed) {
            expander.innerHTML = "-"; //展开显示"-"
            var rowCount = spreadsheetReport.getRowCount();
            for (var i = 0; i < rowCount;) { //i=0,从第1行开始,即列头在第1行
                var td0 = spreadsheetReport.getCell(i, 1);
                var td1 = spreadsheetReport.getCell(i, 2);
                var td2 = spreadsheetReport.getCell(i, 3);
                if (td0 == td1) {
                    td0.colSpan++;
                    if (td0 == td2) {
                        td0.colSpan++;
                    }
                } else {
                    td1.style.display = ""; //显示"+"所在列右边的第1列
                    td2.style.display = ""; //显示"+"所在列右边的第2列
                }
                i += td1.rowSpan;
            }
            cell.collapsed = false;
            table.style.width = width + cell.hiddenWidth + "px";
        } else {
            expander.innerHTML = "+"; //收起显示"+"
            var rowCount = spreadsheetReport.getRowCount();
            var w = 0;
            for (var i = 0; i < rowCount;) {
                var td0 = spreadsheetReport.getCell(i, 1);
                var td1 = spreadsheetReport.getCell(i, 2);
                var td2 = spreadsheetReport.getCell(i, 3);
                if (td0 == td1) {
                    td0.colSpan--;
                    if (td0 == td2) {
                        td0.colSpan--;
                    }
                } else {
                    td1.style.display = "none"; //隐藏"+"所在列右边的第1列
                    td2.style.display = "none"; //隐藏"+"所在列右边的第2列
                    if (w === 0) {
                        w += td1.offsetWidth + td2.offsetWidth;
                    }
                }
                i += td1.rowSpan;
            }
            if (!cell.hiddenWidth) cell.hiddenWidth = w;
            table.style.width = width - w + "px";
            cell.collapsed = true;
        }
    }
    expander.onclick();
}


关键对象总结

  • 通过spreadsheetReport.elem_btnPrint.parentNode.appendChild 方法,将新创建的按钮添加到工具栏的尾部。
  • 利用spreadsheetReport.addListener 方法,为新创建的按钮绑定事件处理函数。

示例宏资源:点击加号控制列.xml