示例说明

         我们在页面中可以实现如下效果。点击上方的“收入”，“支出”。可以切换对应的柱图和饼图。

       

        

设置方法

          1、首先在电子表格设计器（Microsoft Office Excel）中，创建电子表格报表。

          2、在浏览器的资源定制节点下，选中电子表格，右键选择 编辑宏 进入报表宏界面。

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

宏类型

类型

对象

事件

ClientSide

spreadsheetReport

onRender

 

宏代码

/**
 * 在报表中存在两块互斥显示的区域，点击两个单元格对其进行切换
 */
var ClickCellSwitchTowArea = use("cmcclabsrds.public.ClickCellSwitchTowArea");
function main(spreadsheetReport) {
    //debugger;
    var kaitiButtonPos = "F18";
    var kaitiArea = {
        topLeft: "A1",
        bottomRight: "G16"
    };
    var jietiButtonPos = "G2";
    var jietiArea = {
        topLeft: "A17",
        bottomRight: "G31"
    };
    // 切换tab1，tab2
    ClickCellSwitchTowArea.twoCellClickSwitchTowArea(spreadsheetReport, kaitiButtonPos, kaitiArea, jietiButtonPos, jietiArea, true);
};

      
        4、在宏管理的工具宏中创建宏代码库，新建客户端模块ClickCellSwitchTowArea和客户端模块CmcclabsClientUtils，弹出的对话框中的对象和事件不用选，将下面宏代码复制到编辑区。

        ClickCellSwitchTowArea模块：

/**
 * 在报表中存在两块互斥显示的区域，点击两个单元格对其进行切换
 *
 */
function twoCellClickSwitchTowArea(spreadsheetReport, cell1Pos, cell1Area, cell2Pos, cell2Area, show1stArea, delayTimes) {
    // debugger;
    var kaitiButtonPos = cell1Pos;
    var kaitiArea = cell1Area;
    var jietiButtonPos = cell2Pos;
    var jietiArea = cell2Area;
    // 把所有对象封装到一起，便于传递到事件处理函数中
    var btnClickHandlerParam = {
        spreadsheetReport: spreadsheetReport,
        kaitiArea: kaitiArea,
        jietiArea: jietiArea
    };
    // 设置开题按钮事件
    var kaitiPos = spreadsheetReport.parseCellIndex(kaitiButtonPos);
    var kaitiCell = spreadsheetReport.getCell(kaitiPos[0], kaitiPos[1]);
    if (kaitiCell) {
        kaitiCell.style.cursor = "pointer";
        spreadsheetReport.addListener(kaitiCell, "click", doKaitiButtonClick, btnClickHandlerParam);
    }
    // 设置结题按钮事件
    var jietiPos = spreadsheetReport.parseCellIndex(jietiButtonPos);
    var jietiCell = spreadsheetReport.getCell(jietiPos[0], jietiPos[1]);
    if (jietiCell) {
        jietiCell.style.cursor = "pointer";
        spreadsheetReport.addListener(jietiCell, "click", doJietiButtonClick, btnClickHandlerParam);
    }
    // 初始显示开题内容
    setTimeout(function() {
        // debugger;
        if (show1stArea) {
            doKaitiButtonClick(kaitiCell, btnClickHandlerParam);
        } else {
            doJietiButtonClick(jietiCell, btnClickHandlerParam);
        }
    },
    delayTimes || 100);
};
// "开题"按钮的click事件处理函数
function doKaitiButtonClick(e, btnClickParam) {
    // debugger;
    var btnClickHandlerParam = btnClickParam || this;
    var spreadsheetReport = btnClickHandlerParam.spreadsheetReport;
    var kaitiArea = btnClickHandlerParam.kaitiArea;
    var jietiArea = btnClickHandlerParam.jietiArea;
    toogleCellAreaVisible(spreadsheetReport, kaitiArea, true);
    toogleCellAreaVisible(spreadsheetReport, jietiArea, false);
};
// "结题"按钮的click事件处理函数
function doJietiButtonClick(e, btnClickParam) {
    // debugger;
    var btnClickHandlerParam = btnClickParam || this;
    var spreadsheetReport = btnClickHandlerParam.spreadsheetReport;
    var kaitiArea = btnClickHandlerParam.kaitiArea;
    var jietiArea = btnClickHandlerParam.jietiArea;
    toogleCellAreaVisible(spreadsheetReport, jietiArea, true);
    toogleCellAreaVisible(spreadsheetReport, kaitiArea, false);
};
// 显示|隐藏指定区域的所有行
function toogleCellAreaVisible(spreadsheetReport, areaPos, show) {
    // debugger;
    var topLeft = spreadsheetReport.parseCellIndex(areaPos.topLeft);
    var bottomRight = spreadsheetReport.parseCellIndex(areaPos.bottomRight);
    for (i = topLeft[0]; i <= bottomRight[0]; i++) {
        var td = spreadsheetReport.getCell(i, 0);
        if (td) {
            var tr = td.parentNode;
            tr.style.display = show ? "": "none";
            // 隐藏图形
            var charts = tr.getElementsByTagName("img");
            for (j = 0; j < charts.length; j++) {
                var chart = charts[j];
                chart.style.display = show ? "": "none";
            }
        }
    }
};

         CmcclabsClientUtils模块：

/**    
 * 对日期格式化   
 * DateFormat("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423    
 * DateFormat("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04    
 * DateFormat("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04    
 * DateFormat("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04    
 * DateFormat("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18    
 */
function DateFormat(dt, fmt) {
    var o = {
        "M+": dt.getMonth() + 1,
        //月份      
        "d+": dt.getDate(),
        //日      
        "h+": dt.getHours() % 12 == 0 ? 12 : dt.getHours() % 12,
        //小时      
        "H+": dt.getHours(),
        //小时      
        "m+": dt.getMinutes(),
        //分      
        "s+": dt.getSeconds(),
        //秒      
        "q+": Math.floor((dt.getMonth() + 3) / 3),
        //季度      
        "S": dt.getMilliseconds() //毫秒      
    };
    var week = {
        "0": "/u65e5",
        "1": "/u4e00",
        "2": "/u4e8c",
        "3": "/u4e09",
        "4": "/u56db",
        "5": "/u4e94",
        "6": "/u516d"
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (dt.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    if (/(E+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f": "/u5468") : "") + week[dt.getDay() + ""]);
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    }
    return fmt;
};

电子表格切换tab页.xml