【Stimulsoft Reports.JS教程】Designer(上篇)

使用教程 | 作者:不飞的小鸟 | 2018-08-09 15:05:59| 阅读 0 有用 (0) 评论 (0) 收藏


概述:本文主要讲解了如何在Stimulsoft中更改报表设计器主题、设计器事件、在Designer中编辑报表模板和Designer中的全屏模式

【下载Stimulsoft Reports.JS最新版本】

(一)更改报表设计器主题

此示例显示如何更改设计器默认主题。您需要做的就是将部分中主题的CSS文件替换为另一个可用主题,Stimlulsoft提供超过25个主题,您还可以根据需要调整CSS文件。例如,将Office2013 DarkGray Green 主题应用于设计器:


示例代码的结果如下图所示:

stimulsoftJS


 

(二)设计器事件

此示例显示如何使用报表设计器事件,某些设计器操作包含订阅的事件,例如,保存报表,创建新报表,预览报表,退出设计器:

// Set the full screen mode for the designer
var options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = true;
 
// Create the report designer with specified options
var designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);
 
// Assign the onSaveReport event function
designer.onSaveReport = function (e) {
    var jsonStr = e.report.saveToJsonString();
    alert("Save to JSON string complete.")
}
 
// Assign the onCreateReport event function
designer.onCreateReport = function (e) {
    var ds = new Stimulsoft.System.Data.DataSet("Demo");
    ds.readJsonFile("../reports/Demo.json");
    e.report.regData("Demo", "Demo", ds);
}
 
// Assign the onPreviewReport event function
designer.onPreviewReport = function (e) {
    switch (e.format) {
        case Stimulsoft.Report.StiExportFormat.Html:
            e.settings.zoom = 2; // Set HTML zoom factor to 200%
            break;
    }
}
 
// Assign the onExit event function
designer.onExit = function (e) {
 
}
 
// Create a new report instance
var report = new Stimulsoft.Report.StiReport();
// Load report from url
report.loadFile("../reports/SimpleList.mrt");
// Edit report template in the designer
designer.report = report;
 
// Show the report designer in the 'content' element
designer.renderHtml("content");

示例代码的结果如下图所示。

stimulsoftJS


 

(三)在Designer中编辑报表模板

此示例显示如何加载报表模板并在设计器中对其进行编辑。您需要创建StiReport 类型的报表对象 ,然后通过调用loadFile() 方法加载报表模板文件 。要在设计器中编辑报表,只需将报表对象分配给设计器的报表属性即可:

// Set the full screen mode for the designer
var options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = true;
 
// Create the report designer with specified options
var designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);
// Create a new report instance
var report = new Stimulsoft.Report.StiReport();
// Load report from url
report.loadFile("../reports/SimpleList.mrt");
// Edit report template in the designer
designer.report = report;

示例代码的结果如下图所示。

stimulsoftJS


 

(四)Designer中的全屏模式

此示例显示如何在默认情况下以全屏模式显示报表设计器。在全屏模式下,设计器将显示在浏览器窗口的所有可用区域中。要在默认情况下启用此模式,您需要在StiDesignerOptions对象中设置fullScreenMode选项 :

// Set full screen mode for the designer
var options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = true;
 
// Create the report designer with specified options
var designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);

示例代码的结果如下图所示。

stimulsoftJS

下载示例


慧都控件|提供软件技术整体解决方案

云集全球三千余款优秀控件、软件产品,提供行业领先的咨询、培训与开发服务
企业QQ:800018081|电话:023-68661681

用户评论: 您的宝贵经验,能为更多人带来帮助,登录后才能评论。
评论加载中...



    联系我们


    官方微信
    官方微博
    慧都科技有限公司 版权所有 Copyright 2003-<%:DateTime.Now.Year %> 渝ICP备12000582号 | 渝公网安备 50010702500608号