组件调用

本章节主要讲述如何将乐创者智能报表（lczReport)以组件方式整合到第三方业务系统中去。

注意：组件方式渲染报表暂不支持参数区域。

1 集成说明

第一步，把 lczServer 目录下的 “lczReport” 目录复制到 业务系统目录下。
第二步，在需要整合报表的二次开发页面中加载必要的依赖文件：

<script type="text/javascript" src="存放路径/jquery.min.js"></script>
<script type="text/javascript" data-main="lczReport/main_zh_CN" src="lczReport/lib/require/require.min_2.3.6.js"></script>

第三步，在待显示报表的区域定义div标签。
报表高度固定：

<div id="根节点的唯一标识" style="width:100%;height:600px;" ></div>

高度按内容自适应：

<div id="根节点的唯一标识" style="width:100%;height:100%;min-height:100px" ></div>

注意：”min-height”代表报表区域的最小高度，可按照实际需要设置即可。

第四步，生成报表实例对象

function renderReport() {
    var element = document.getElementById("根节点的唯一标识");
    var settings = {
        "isServer" : false,    // 是否是服务器内整合
        "language" : "zh_CN",    //语言：zh_CN中文，en:英文 
        "serverInfo" : {
            "ip" : "服务器地址",
            "port" : 80,    //服务器端口
            "scheme" : "http",    //支持http或https
            "contextPath" : "/lczServer",
            "pagePath" : ""    //所属页面相对于根路径的位置，根目录为空即可，如果在第一层，配置：../，如果在第二层配置：../../
        },
        "authId" : "",    //非免登模式访问报表：登录服务器后的authId，匿名访问使用anonymous_admin；免登模式访问报表：此参数无需配置
        "targetVolume" : "智能报表所属应用内部名称",
        "fileName" : "智能报表内部名称",
        "fileTitle" : "",    //【可选】报表标题
        "variants" : "",    //【可选】报表查询参数，格式： 参数名=参数值;@参数名=参数显示值;参数名=参数值...
        "showLoading" : true,    //【可选】是否显示loading，默认：true
        "hideToolbar" : false,    //【可选】是否隐藏工具栏，默认：false
        "pageToolbar" : {    //【可选】底部翻页工具栏
            "show" : true    //是否显示，默认显示
        },
        "style" : {    //【可选】报表缺省样式
            "bg" : {    //背景
                "color" : "rgba(255,255,255,0)"    //缺省的背景颜色
            }
        },
        "privilege" : {    //【可选】认证相关
            "type" : "认证类型",    //认证类型
            "validateVariants" : ""    //认证相关的校验参数
        },
        "baiduAK" : "",    //【可选】百度地图AK
        "templateCustomized" : ""    //【可选】报表/单元格表单模板的局部个性化配置，通过该参数动态改变执行模板相关对象的属性设置。参数值为json结构，详见：templateCustomized的结构说明；
    };
    //创建智能报表实例对象
    require(["LczReport"], function(LczReport){
        var report = new LczReport(element, settings);
        //报表执行前事件
        report.on("beforeLoadData", function() {

        });
        //报表渲染前事件
        report.on("beforeRender",function(){

        });
        //报表渲染完成事件
        report.on("afterRender",function(){

        });
        //报表执行出错事件
        report.on("error",function(){

        });
        //响应大小变化
        window.addEventListener("resize",function(){
            $(element).width(新的宽度).height(新的高度);
            report.resize();
        });
        //报表销毁前事件
        report.on("unload",function(url){
            report.destroy();
        });
    });
}

templateCustomized的josn结构说明：

{
    "sheets": [
        {
            "name": "sheet1", //所属工作表名称
            "hide": false //【可选】工作表隐藏属性:true/false,
            "writeable": false, //【可选】工作表只读属性:true/false
            "columns": [//待个性化的列
                {
                    "index": 1 //列号,从1开始,
                    "hide": true //【可选】列隐藏属性:true/false 
                }
            ],
            "rows": [//待个性化的行
                {
                    "index": 2, //行号,从1开始
                    "hide": true //【可选】行隐藏属性:true/false 
                }
            ]
        }
    ]
}

2 请求参数

常用参数

“公开访问”在历史版本中也称之为”匿名访问”。

认证参数(privilege)

3 前端事件

报表控件在渲染、操作过程中触发的各类事件，便于二次开发比较方便的进行一些个性化的业务处理。

4 工具栏

当工具栏不显示时，二次开发程序也可以调用相应的方法触发工具栏上的功能。

5 常见问题

暂无