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

示例说明

电子表格的单元格中默认是没有鼠标提示的，若是需要在子表格的单元格上添加鼠标提示，需求通过宏实现，效果如下：

版本及客户端说明

1.smartbi版本：最新版本

2.客户端：PC

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

设置方法

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

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

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

宏类型

类型

对象

事件

ClientSide

spreadsheetReport

onRender

宏代码

宏代码
 
function main(spreadsheetReport) {
    for (var i = 4; i < 8; i++) {
        var cell = spreadsheetReport.getCell(i, 1);//获取B列的单元格
        //通过设置title属性设置鼠标提示
        if (cell.innerText == '华东') cell.title = "华东包含：北京、吉林省";
        if (cell.innerText == '华中') cell.title = "华中包含：湖南、湖北";
        if (cell.innerText == '华南') cell.title = "华南包含：广州、深圳";
        if (cell.innerText == '华北') cell.title = "华北包含：黑龙江";
    }
}


关键对象总结

  • 获取电子表格单元格：spreadsheetReport.getCell(i, 11)；
  • 设置电子表格提示内容：cell.title ；

 

资源下载

报表资源：单元格鼠标提示migrate.xml（该资源基于内置的northwind数据库实现）

 

 

更多

一、使用DIV方式

使用上述的方式，在谷歌浏览器上，有时候鼠标提示悬浮的时间较多，并且效果也不够好。可以采用增加浮动div的方式来显示。

宏类型

类型对象事件
ClientSidespreadsheetReportonRender

 

宏代码

function main(spreadsheetReport) {
    jsloader.resolve("thirdparty.jquery.jquery", true);
    var tip1 = "华东包括：北京、吉林省";
    var cell1 = spreadsheetReport.getCell("B5"); //需要提示的单元格:D6
    var div1 = createDiv(cell1, tip1);
    var tip2 = "华南包括：广州、深圳";
    var cell2 = spreadsheetReport.getCell("B6");
    var div2 = createDiv(cell2, tip2);
    var tip3 = "华北包含：黑龙江";
    var cell3 = spreadsheetReport.getCell("B7");
    var div3 = createDiv(cell3, tip3);
    var tip4 = "华中包含：湖南、湖北";
    var cell4 = spreadsheetReport.getCell("B8");
    var div4 = createDiv(cell4, tip4);
}

//下面两个方法是设置div的。
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) {
 		 cell.appendChild(div);
        var x = e.clientX || e.layerX;
        var y = e.clientY || e.layerY;
 		 if (this.sheetWidth - x < div.offsetWidth && x > div.offsetWidth) {
            x = x - div.offsetWidth - 3;
        } else {
            x = x + 6;
        }
        if (this.sheetHeight - y < div.offsetHeight && y > div.offsetHeight) {
            y = y - div.offsetHeight;
        }
        div.style.top = y + "px"; //提示框的位置 y 轴
        div.style.left = x + 10 + "px"; //提示框的位置 x 轴	
      
    } else {
        cell.removeChild(div);
    }
}

 

 

二、多个Sheet显示鼠标提示

如果报表中存在多个sheet，并且每个sheet都有单元格需要显示鼠标提示。可参考下面的宏示例

报表设计界面如下：

sheet1

 

sheet2

宏类型

类型对象事件
ClientSidespreadsheetReportonRender

 

宏代码

function main(spreadsheetReport) {
    jsloader.resolve("thirdparty.jquery.jquery", true);
    var currentSheetName = spreadsheetReport.sheetNames[spreadsheetReport.currentSheetIndex]; //获取当前sheet名称
    
    //判断当前sheet名称并设置鼠标提示
    if (currentSheetName == "Sheet1") {
        var tip = "这是sheet1华东";
        var cell = spreadsheetReport.getCell("B5"); //需要提示的单元格:D6
        var div = createDiv(cell, tip);
    } else if (currentSheetName == "Sheet2") {
        var tip = "这是sheet2美国";
        var cell = spreadsheetReport.getCell("B5"); //需要提示的单元格:D6
        var div = createDiv(cell, tip);
    }
}

//下面两个方法是设置div的。
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);
    }
}

 

 


  • 无标签