Smartbi V7 帮助中心
页面树结构
转至元数据结尾
转至元数据起始

正在查看旧版本。 查看 当前版本.

与当前比较 查看页面历史

« 前一个 版本 2 下一个 »

示例说明

客户需求：在电子表格报表的单元格上，当鼠标移过去时显示悬浮提示信息。类似上述需求，可以参照如下方法进行设置。参考示例：

版本及客户端说明

1.smartbi版本：V5/v6.1/v6.2/V7

2.客户端：PC

3.浏览器：IE11、谷歌浏览器（Chrome）、火狐浏览器（Firefox）

设置方法

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

本例示例如下所示（其中红框部分为提示信息，可隐藏）：

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

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

宏类型

类型

对象

事件

ClientSide

spreadsheetReport

onRender

 

宏代码

function main(spreadsheetReport) {
    debugger;
    var c = spreadsheetReport.customProperties;
    jsloader.resolve("thirdparty.jquery.jquery", true);
    
    var cell = spreadsheetReport.getCell("E2"); //需要提示的单元格:E2
    var div = createDiv(cell,c["E5"]);
    
    var cell = spreadsheetReport.getCell("D2"); //需要提示的单元格:E2
    var div = createDiv(cell,c["D5"]);
    
    var cell = spreadsheetReport.getCell("C2"); //需要提示的单元格:E2
    var div = createDiv(cell,c["C5"]);
    //doEvent(cell,div);
	//当涉及到多个sheet页时，通过如下逻辑针对sheet页进行设置
	//var currentSheetName = spreadsheetReport.sheetNames[spreadsheetReport.currentSheetIndex];
    //if(currentSheetName == "Sheet1"){
	//	var cell = spreadsheetReport.getCell("E2"); //需要提示的单元格:E2
    //	var div = createDiv(cell,c["E5"]);

	//}
   
}
function createDiv(cell,tip){
    var div = document.createElement("div");
    div.style.position = "absolute";
    div.style.border = "1px solid #C4E1FF";
    div.style.padding = "10px";
    div.style.backgroundColor = "#fff";
    div.style.textAlign = 'left';
    div.innerHTML = tip;
    $(cell).mousemove(function(event) {
        setDIV(event, true, cell, div);
    });
    $(cell).mouseleave(function(event) {
        setDIV(event, false, cell, div);
    });
}
function setDIV(e, show, cell, div) {
    if (show) {
        var x = e.clientX || e.layerX;
        var y = e.clientY || e.layerY;
        div.style.top = y + "px"; //提示框的位置 y 轴
        div.style.left = x + 10 + "px"; //提示框的位置 x 轴
        cell.appendChild(div);
    } else {
        cell.removeChild(div);
    }
}

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

类型

对象

事件

ClientSide

spreadsheetReport

onBeforeOutput

function main(spreadsheetReport) {
    var sheet = spreadsheetReport.getSheetByName("Sheet1");
    
    var valueE5 = getDisplayCellValue(sheet,"E5");
    spreadsheetReport.customProperties.put("E5", valueE5);
    
    var valueD5 = getDisplayCellValue(sheet,"D5");
    spreadsheetReport.customProperties.put("D5", valueD5);
    
    var valueC5 = getDisplayCellValue(sheet,"C5");
    spreadsheetReport.customProperties.put("C5", valueC5);
    
}
//获取单元格的值
function getCellValue(cell) {
    if (!cell) return null;
    if (typeof cell.length == 'number') {
        var ret = [];
        for (var i = 0; i < cell.length; i++) {
            ret.push(cell[i].value);
        }
        return ret;
    } else {
        return cell.value;
    }
}
function getDisplayCellValue(sheet,position) {
    //var positions = "E5"; //隐藏单元格:E5。 
    //var position = positions[i].trim();
    var expandedPositions = sheet.getExpandedPositions(position);
    var cell = sheet.getCell(expandedPositions[0]);
    var value = getCellValue(cell).toString().replaceAll("\\n", "<br>"); //替换换行符。
    return value;
}

 

资源下载

报表资源：migrate.xml

  • 无标签