示例说明
客户需求:在电子表格报表的单元格上,当鼠标移过去时显示悬浮提示信息。类似上述需求,可以参照如下方法进行设置。参考示例:
版本及客户端说明
1.smartbi版本:V5/v6.1/v6.2/V7
2.客户端:PC
3.浏览器:IE11、谷歌浏览器(Chrome)、火狐浏览器(Firefox)
设置方法
1、首先在电子表格设计器(Microsoft Office Excel)中,创建电子表格报表。
本例示例如下所示(其中红框部分为提示信息,可隐藏):
2、在浏览器的资源定制节点下,选中电子表格,右键选择 编辑宏 进入报表宏界面。
3、在报表宏界面新建客户端模块。在弹出的新建模块对话框中,选择对象为spreadSheetReport、事件为onRender、并把下面宏代码复制到代码编辑区域。
宏类型
类型 | 对象 | 事件 |
---|---|---|
ClientSide | spreadsheetReport | onRender |
宏代码
function main(spreadsheetReport) { debugger; var c = spreadsheetReport.customProperties; jsloader.resolve("thirdparty.jquery.jquery", true); var cell = spreadsheetReport.getCell("E2"); //需要提示的单元格:E2 var div = createDiv(cell,c["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"]); //doEvent(cell,div); //当涉及到多个sheet页时,通过如下逻辑针对sheet页进行设置 //var currentSheetName = spreadsheetReport.sheetNames[spreadsheetReport.currentSheetIndex]; //if(currentSheetName == "Sheet1"){ // var cell = spreadsheetReport.getCell("E2"); //需要提示的单元格:E2 // var div = createDiv(cell,c["E5"]); //} } 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); } }
4、在报表宏界面新建服务端模块。在弹出的新建模块对话框中,选择对象为spreadSheetReport、事件为onBeforeOutput、并把下面宏代码复制到代码编辑区域。
类型 | 对象 | 事件 |
---|---|---|
ClientSide | spreadsheetReport | 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