【下载Stimulsoft Reports.JS最新版本】
(一)更改报表设计器主题
此示例显示如何更改设计器默认主题。您需要做的就是将
部分中主题的CSS文件替换为另一个可用主题。可用于超过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 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");
示例代码的结果如下图所示。
(三)在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;
示例代码的结果如下图所示。
(四)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);
示例代码的结果如下图所示。