页面树结构
转至元数据结尾
转至元数据起始

温馨提示

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

示例说明

需要这么一个页面,分为左侧链接和右侧详细内容两部分,点击左侧报表的链接单元格,右侧报表定位到同名的目标单元格并高亮

实现步骤

1.创建相关资源

  • 创建电子表格"左侧报表",用于存放超链接报表;
  • 创建电子表格"右侧报表",用于存放具体内容;
  • 创建页面"页面报表跳转",存放左右两侧两张报表

          (1)根据需要选择布局方式,这里使用的是2列_3_7

          (2)适当设置高度,边框,滚动条等设置项,根据需要调整


2.添加报表宏

  1.  "右侧报表"电子表格

    • 服务端宏:"获取右侧报表员工姓名扩展单元格"

  2. "页面报表跳转"页面创建宏

    • 服务端宏:"左侧点击链接右侧定位_link"
    • 客户端宏:"左侧点击链接右侧定位_action"

3.配置相关选项

  1.  "左侧点击链接右侧定位_link"中配置sheet页链接单元格

      2. "左侧点击链接右侧定位_action "中配置右侧报表目标单元格,右侧报表节点Id

宏文件

宏类型

类型对象事件
ServerSidespreadsheetReportonBeforeOutput

宏代码

获取右侧报表员工姓名扩展单元格
function main(spreadsheetReport) {
    spreadsheetReport.printExpandedPositions()
}

宏类型

类型对象子对象事件
ServerSide左侧报表spreadsheetReportonBeforeOutput

宏代码

左侧点击链接右侧定位_link
function main(spreadsheetReport) {
    //左侧报表超链接所在sheet页名称和单元格名称
    var linkCell = "B2";
    var sheetName = "Sheet1";
    if (!spreadsheetReport || (spreadsheetReport.outputType != "refresh" && spreadsheetReport.outputType != "HTML")) return;
    var sheet = spreadsheetReport.getSheetByName(sheetName);
    var positions = linkCell.split(",");
    for (var i = 0; i < positions.length; i++) {
        var position = positions[i].trim();
        var expandedPositions = sheet.getExpandedPositions(position);
        for (var j = 0; j < expandedPositions.length; j++) {
            var cell = sheet.getCell(expandedPositions[j]);
            if (true) {
                addLink(spreadsheetReport, sheet, cell, linkCell);
            }
        }
    }
}
function addLink(spreadsheetReport, sheet, cell, linkCell) {
    sheet.addRuleLink(cell.cellPosition, "anyRuleName", [
        getCellValue(cell.getRelativeCells(linkCell))
    ]);
}
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 checkValue(v1, v2, op) {
    if (v1 && typeof v1.length == 'number') {
        for (var i = 0; i < v1.length; i++) {
            if (checkValue(v1[i], v2, op)) return true;
        }
        return false;
    }
    if (v2.match(/^d+(.d+)?$/)) {
        v2 = parseFloat(v2);
    }
    switch (op) {
        case 'EQUAL':
            return (v1 == v2) || (v2.match(/^\d+(\.\d+)?$/) && v1 == parseFloat(v2));
        case 'GREATER':
            return v1 > v2;
        case 'LESS':
            return v1 < v2;
        case 'INCLUDE':
            return v1 && v1.indexOf(v2) >= 0;
        case 'PREFIX':
            return v1 && v1.indexOf(v2) == 0;
        case 'SUFFIX':
            return v1 && v1.indexOf(v2) == (v1.length - v2.length);
    }
}

宏类型

类型对象子对象事件
ClientSide左侧报表spreadsheetReportonLinkClick

宏代码

左侧点击链接右侧定位_action
function paramToString(v) {
    return v == null ? null : v.toString();
}

function main(spreadsheetReport, ruleName, params, page, pageContext) {
    //配置目标单元格(员工姓名扩展字段所在单元格)
    var actionCell = "B3";
    //配置右侧报表的节点Id
    var targetResId = "I402882fd015b21fa21fa98e7015b220a522c00c0";
    var newReport = false;
    var dashlet = page.findDashletByReportId(targetResId);
    if (!dashlet)
        return;
    var portlet = dashlet.currentPortlet;
    if (!portlet) {
        return;
    }
    //获取右侧报表电子表格对象
    var actionReport = portlet.getPortletObject();
    var list = actionReport.getExpandedPositions(actionCell);
    //获取目标单元格
    var cell = getInsCell(params, list, actionReport);
    var doc = cell.ownerDocument;
    var c = cell;
    var top = -1;
    var scale = doc._scale || 1;
    var posScale = domutils.isMobile() ? 1 : scale;
    while (c) {
        top += c.offsetTop;
        c = c.offsetParent;
    }
    var frozenColumn = doc.getElementById('frozenColumn');
    var frozenTop = frozenColumn ? frozenColumn.clientHeight : 0;
    var el;
    /*if (domutils.isIE()) {
        el = doc.documentElement;
    } else {
        el = doc.scrollingElement;
    }*/
    el = doc.documentElement || doc.scrollingElement;
    
    var bodyWidth = doc.documentElement.clientWidth;
    var bodyHeight = doc.documentElement.clientHeight;
    if (doc.divScroll) {
        doc.divScroll.scrollTop = (top + cell.clientHeight + 2) * posScale;
        if (top - doc.divScroll.scrollTop / posScale < frozenTop) {
            doc.divScroll.scrollTop = (top - frozenTop + 1) * posScale;
        }
    } else {
        el.scrollTop = (top - 2 * cell.clientHeight + 2) * posScale;
        if (top - el.scrollTop / posScale < frozenTop) {
            el.scrollTop = (top - frozenTop + 1) * posScale;
        }
    }
    
    
    //获取目标单元格
    function getInsCell(params, list, actionReport) {
        var cellLight;
        for (var i = 0; i < list.length; i++) {
            var pos = actionReport.parseCellIndex(list[i]);
            var cell = actionReport.getCell(pos[0], pos[1]);
            if (cell.bgColor) {
                cell.bgColor = "";
            }
            //高亮目标单元格
            if (cell.innerHTML == params[0][0]) {
                cellLight = actionReport.getCell(pos[0], pos[1]);
                cellLight.bgColor = "yellow";
            }
        }
        return cellLight;
    }
}

关键对象总结

  • 在服务端中通过spreadsheetReport.printExpandedPositions()打印单元格,在客户端宏中才能通过actionReport.getExpandedPositions(actionCell);
    或者数据列的扩展结果
  • 通过报表id,获取目标报表对象 

    var dashlet = page.findDashletByReportId(targetResId); 

     if (!dashlet) return; var portlet = dashlet.currentPortlet; 

     if (!portlet) { return; }

    var actionReport = portlet.getPortletObject(); //获取右侧报表电子表格对象 

资源下载

报表资源:页面实现报表的超链接效果.xml


  • 无标签