【Stimulsoft Reports.JS教程】Designer（上篇）

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

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

（一）更改报表设计器主题

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

<!-- Report designer Office2013 DarkGray Green style --><link href="../css/stimulsoft.designer.office2013.darkgray.green.css" rel="stylesheet">

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

（二）设计器事件

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

// Set the full screen mode for the designervar options = new Stimulsoft.Designer.StiDesignerOptions();options.appearance.fullScreenMode = true;// Create the report designer with specified optionsvar designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);// Assign the onSaveReport event functiondesigner.onSaveReport = function (e) {    var jsonStr = e.report.saveToJsonString();    alert("Save to JSON string complete.")}// Assign the onCreateReport event functiondesigner.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 functiondesigner.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 functiondesigner.onExit = function (e) {}// Create a new report instancevar report = new Stimulsoft.Report.StiReport();// Load report from urlreport.loadFile("../reports/SimpleList.mrt");// Edit report template in the designerdesigner.report = report;// Show the report designer in the 'content' elementdesigner.renderHtml("content");

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

（三）在Designer中编辑报表模板

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

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

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

（四）Designer中的全屏模式

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

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

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

下载示例

标签：JavaScript 报表事件Stimulsoft

来源：慧都