示例说明
客户需求：在电子表格报表的单元格上，当鼠标移过去时显示悬浮提示信息。类似上述需求，可以参照如下方法进行设置。参考示例：在电子表格报表的单元格上，当鼠标移过去时显示悬浮提示信息，类似Excel中的批注功能。可以参照如下方法进行设置。参考示例：
版本及客户端说明
1.smartbi版本：V5/v6.1/v6.2/V7smartbi版本：最新版本
2.客户端：PC
3.浏览器：IE11、谷歌浏览器（Chrome）、火狐浏览器（Firefox）
...
设置步骤
1、首先在电子表格设计器（Microsoft 1.首先在电子表格设计器（Microsoft Office Excel）中，创建电子表格报表。
本例示例如下所示（其中红框部分为提示信息，可隐藏）：本例示例如下所示（其中红框部分为提示信息）：
2、在浏览器的资源定制节点下，选中电子表格，右键选择 2.在浏览器的资源定制节点下，选中电子表格，右键选择 编辑宏 进入报表宏界面。
3、在报表宏界面新建客户端模块。在弹出的新建模块对话框中，选择对象为3.在报表宏界面新建服务端模块。在弹出的新建模块对话框中，选择对象为spreadSheetReport、事件为onRenderonBeforeOutput、并把下面宏代码复制到代码编辑区域。
宏类型
类型
对象
事件
...
服务端
spreadsheetReport
...
onBeforeOutput
宏代码
代码块 language js linenumbers true 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、并把下面宏代码复制到代码编辑区域。
宏类型
类型
对象
事件
客户端
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) { 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
...
...
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
