示例说明

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

版本及客户端说明

1.smartbi版本：最新版本

2.客户端：PC

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

设置步骤

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

本例示例如下所示

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

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

宏类型

• 类型	对象	事件
  客户端	spreadsheetReport	onRender

宏代码

• 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、单元格鼠标提示源于报表

在电子表格中，鼠标提示框中的内容同样来源于报表中，而不是直接在宏代码中设置。参考示例：

设置步骤

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

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

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

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

宏类型

• 类型	对象	事件
  服务端	spreadsheetReport	onBeforeOutput

宏代码

• function main(spreadsheetReport) {
      var sheet = spreadsheetReport.getSheetByName("Sheet1"); //根据sheet名称获取sheet
  
      //下面的内容根据单元格，获取要显示出来的内容。并且添加到customProperties这个对象中去
      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 expandedPositions = sheet.getExpandedPositions(position);
      var cell = sheet.getCell(expandedPositions[0]);
      var value = getCellValue(cell).toString().replaceAll("\\n", "<br>"); //替换换行符。
      return value;
  }
  

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

宏类型

        宏代码

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实现单元格鼠标提示

在电子表格中，鼠标提示框中的内容同样来源于报表中，而不是直接在宏代码中设置。参考示例：

设置步骤

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

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

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

宏类型

• • 类型	对象	事件
    客户端	spreadsheetReport	onRender

宏代码

• • function main(spreadsheetReport) {
        var c = spreadsheetReport.customProperties;
        jsloader.resolve("thirdparty.jquery.jquery", true);
        var ss = "地区的总销售额<br>销售额=销售单价*销售量<br>注：销售单价取各地区平均值";
        var cell = spreadsheetReport.getCell("E2"); //需要提示的单元格:E2
        var div = createDiv(cell, ss); //获取服务端宏设置的对应单元格的值
        var tt = "js实现鼠标滑过弹出漂亮的提示说明效果<br>供大家参考学习";
        var cell = spreadsheetReport.getCell("C2"); //需要提示的单元格:E2
        var div = createDiv(cell, tt);
        this.sheetHeight = spreadsheetReport.elemSheetFrame.offsetHeight;
        this.sheetWidth = spreadsheetReport.elemSheetFrame.offsetWidth;
    }
    //创建鼠标提示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 = "#66CCCC";
        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);
        });
    }
    //设置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 + "px"; //提示框的位置 x 轴
        } else {
            cell.removeChild(div);
        }
    }