Smartbi V7 帮助中心
页面树结构

版本比较

旧版本 8

changes.mady.by.user 张雪琼

保存于

比较

新版本 当前版本

changes.mady.by.user 黎灏锋

保存于

标识

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


注意
title温馨提示

本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配（如使用功能不一致，或多个宏代码冲突等），需根据实际需求开发代码。

示例说明

在电子表格报表的单元格上，当鼠标移过去时显示悬浮提示信息，类似Excel中的批注功能。可以参照如下方法进行设置。参考示例：

 


版本及客户端说明

1.smartbi版本：最新版本

2.客户端：PC

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

 


设置步骤

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

...

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


宏类型


  • 类型

    对象

    事件

    客户端

    spreadsheetReport

    onRender


...


  • 代码块
    languagejs
    linenumberstrue
    function main(spreadsheetReport) {
    jsloader.resolve("thirdparty.jquery.jquery", true);
    var currentSheetName = spreadsheetReport.sheetNames[spreadsheetReport.currentSheetIndex]; //获取当前sheet名称
    //判断当前sheet名称并设置鼠标提示
    if (currentSheetName == "Sheet1") {
        var tip1 = "华东包括：北京、吉林省";
        var cell1 = spreadsheetReport.getCell("B5"); //为B5为单元格设置鼠标提示
        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);
    } else
        return;
}

//下面两个方法是设置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 = "<font color=red>" + tip + "</font>"; //设置提示内容字体颜色
    $(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;
        div.style.top = y + "px"; 
        div.style.left = x + 10 + "px"; 
        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;
        }
    } else {
        cell.removeChild(div);
    }
}

 

...




更多
...
在电子表格中，鼠标提示框中的内容同样来源于报表中，而不是直接在宏代码中设置。参考示例：
...
1.首先在电子表格设计器（Microsoft Office Excel）中，创建电子表格报表。
本例示例如下所示（其中红框部分为提示信息）：
 

2.在浏览器的资源定制节点下，选中电子表格，右键选择 编辑宏 进入报表宏界面。
...
 代码块
function main(spreadsheetReport) {
    var c = spreadsheetReport.customProperties;
    jsloader.resolve("thirdparty.jquery.jquery", true);
    var cell = spreadsheetReport.getCell("E2"); //需要提示的单元格:E2
    var div = createDiv(cell, c["E5"]); //E2单元格需要提示的内容在E5单元格中，因此从服务端传回来的customPrpoerties对象中拿到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"]);
}
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 = "<font color='red'>" + tip + "</font>"; //设置字体颜色和显示内容
    $(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;
        div.style.top = y + "px"; 
        div.style.left = x + 10 + "px"; 
        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;
        }
    } else {
        cell.removeChild(div);
    }
}
2、js实现单元格鼠标提示
在电子表格中，鼠标提示框中的内容同样来源于报表中，而不是直接在宏代码中设置。参考示例：
Image Removed
设置步骤
1.首先在电子表格设计器（Microsoft Office Excel）中，创建电子表格报表。
2.在浏览器的资源定制节点下，选中电子表格，右键选择 编辑宏 进入报表宏界面。
3.在报表宏界面新建客户端模块。在弹出的新建模块对话框中，选择对象为spreadSheetReport、事件为onRender、并把下面宏代码复制到代码编辑区域。
宏类型
    • 类型
      对象
      事件
      客户端
      spreadsheetReport
      onRender
宏代码
...
languagejs
linenumberstrue
...
"
...
;
...
 
...

        
...
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;
        }
...

  
...
 
...
 
...
} else {
        cell.removeChild(div);
    }
}
...