| 注意 | ||
|---|---|---|
| ||
本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配（如使用功能不一致，或多个宏代码冲突等），需根据实际需求开发代码。 |
示例说明
电子表格的单元格中默认是没有鼠标提示的，若是需要在子表格的单元格上添加鼠标提示，需求通过宏实现，效果如下：
...
类型 | 对象 | 事件 |
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的方式来显示。
...
| 类型 | 对象 | 事件 |
|---|---|---|
| ClientSide | spreadsheetReport | onRender |
宏代码
| 代码块 | ||
|---|---|---|
| ||
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
宏类型
| 类型 | 对象 | 事件 |
|---|---|---|
| ClientSide | spreadsheetReport | onRender |
...
宏代码
| 代码块 | ||
|---|---|---|
| ||
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);
}
} |
...
