页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

示例说明

...

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

展示收入数据

Image Added

 

...

点击“支出”切换到支出饼图

        Image RemovedImage Added

设置方法

...

1.首先在电子表格设计器(Microsoft Office

...

Excel)中,创建电子表格报表。如下:

Image Added


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

...

 

3.在报表宏界面新建客户端模块。在弹出的新建模块对话框中,选择对象为spreadSheetReport、事件为onRender

...

、并把下面宏代码复制到代码编辑区域。               

宏类型

类型

对象

事件

ClientSide

spreadsheetReport

onRender

 

宏代码

js
代码块
language
linenumberstrue
/**
 * 在报表中存在两块互斥显示的区域,点击两个单元格对其进行切换
 */
var ClickCellSwitchTowArea = use("cmcclabsrds.public.ClickCellSwitchTowArea");
function main(spreadsheetReport) {
    //debugger;
    var kaitiButtonPosD4 = "F18";
    var kaitiArea = {
        topLeft: "A1",
        bottomRight: "G16"
    }spreadsheetReport.getCell(3, 3);
    var jietiButtonPosF4 = "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;spreadsheetReport.getCell(3, 5);
    //初始设置单元格背景色、字体颜色以及某个图形展示,隐藏
    D4.style.backgroundColor = '#CE2B2B';   //当前展示的数据颜色
    F4.style.backgroundColor = '#95D0D9';   //可点击展示数据的颜色
    // 把所有对象封装到一起,便于传递到事件处理函数中
    var btnClickHandlerParam = {
        spreadsheetReport: spreadsheetReport,
        kaitiArea: kaitiArea,
        jietiArea: jietiArea
    };
    // 设置开题按钮事件
    var kaitiPos = spreadsheetReport.parseCellIndex(kaitiButtonPos) D4.style.color = '#ffffff';  设置字体颜色
    //  F4.style.color = '#727272';   
 var kaitiCell = spreadsheetReport.getCell(kaitiPos[0], kaitiPos[1]);
    if (kaitiCell) {
        kaitiCellshapesMap["收入柱图"].style.cursordisplay = "pointer";
 
      spreadsheetReport.addListener(kaitiCell, "click", doKaitiButtonClick, btnClickHandlerParam);
shapesMap["支出饼图"].style.display = "none";

  }     //为两个单元格添加点击事件
设置结题按钮事件     var jietiPos = spreadsheetReport.parseCellIndex(jietiButtonPos);
    var jietiCell = spreadsheetReport.getCell(jietiPos[0], jietiPos[1]);
    if (jietiCell) {
        jietiCell.style.cursor = "pointer";
        spreadsheetReport.addListener(jietiCelladdListener(D4, "click", cellClick, spreadsheetReport);
    spreadsheetReport.addListener(F4, "click", doJietiButtonClickcellClick, btnClickHandlerParam);
    }
    // 初始显示开题内容
    setTimeout(function() {
        // debugger;
  spreadsheetReport);
     if (show1stArea!spreadsheetReport.modifyCellValue) {
        var SpreadsheetReport_Modify =  doKaitiButtonClick(kaitiCell, btnClickHandlerParamjsloader.resolve('smartbi.spreadsheetreport.SpreadsheetReport_Modify');
        } else {
            doJietiButtonClick(jietiCell, btnClickHandlerParam);
   new SpreadsheetReport_Modify(spreadsheetReport);
    }
    },
    delayTimes || 100);
};
// "开题"按钮的click事件处理函数
function doKaitiButtonClickcellClick(e, btnClickParam) {
    // debugger;     var btnClickHandlerParamt = btnClickParam || this;
    var spreadsheetReport = btnClickHandlerParam.spreadsheetReporte.target;
    var kaitiArea = btnClickHandlerParam.kaitiArea; if    var jietiArea = btnClickHandlerParam.jietiArea(!t) return;

   toogleCellAreaVisible(spreadsheetReport, kaitiArea, true);    if toogleCellAreaVisible(spreadsheetReport, jietiArea, false);
};
// "结题"按钮的click事件处理函数
function doJietiButtonClick(e, btnClickParam) {t.innerText == '收入') {
          // debugger;
    var btnClickHandlerParam = btnClickParam || this D4.style.backgroundColor = '#CE2B2B';
    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) {F4.style.backgroundColor = '#95D0D9';
            // debugger;     var topLeft = spreadsheetReport.parseCellIndex(areaPos.topLeft);
    var bottomRight = spreadsheetReport.parseCellIndex(areaPos.bottomRight)D4.style.color = '#ffffff';
    for (i = topLeft[0]; i <= bottomRight[0]; i++) { //         var tdF4.style.color = spreadsheetReport.getCell(i, 0);
    '#727272';
   if (td) {             var tr = td.parentNode;
            trspreadsheetReport.shapesMap["收入柱图"].style.display = show ? "": "none";
            // 隐藏图形
            var charts = tr.getElementsByTagName("img");
            for (j = 0; j < charts.length; j++) {
                var chart = charts[j];
                chartspreadsheetReport.shapesMap["支出饼图"].style.display = show ? "": "none";
  

        }         }
    }
};

         CmcclabsClientUtils模块:

代码块
linenumberstrue
/**    
 * 对日期格式化   
 * 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:04else if (t.innerText == '支出') {
        * 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, D4.style.backgroundColor = '#95D0D0';
         //月份      
        "d+": dt.getDate(),
        //日      
        "h+": dt.getHours() % 12 == 0 ? 12 : dt.getHours() % 12,F4.style.backgroundColor = '#CE2B2B';
            //小时      
        "H+": dt.getHours(),
        //小时      
        "m+": dt.getMinutes(),
        //分      
        "s+": dt.getSeconds(),D4.style.color = '#727272';
            //      
        "q+": Math.floor((dt.getMonth() + 3) / 3),F4.style.color = '#ffffff';
          //季度      
        "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))  spreadsheetReport.shapesMap["收入柱图"].style.display = "none";
    }     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))) spreadsheetReport.shapesMap["支出饼图"].style.display = "";
        }
    }

   return fmt;
};

...