【Stimulsoft Reports.JS教程】设计器事件与查看器事件

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

（一）设计器事件

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

// 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");

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

（二）查看器事件

此示例显示如何使用 表查看器事件，某些查看器操作包含您可以订阅的事件，例如，打印操作，导出结束，设计 表：

// Enable the design buttonvar options = new Stimulsoft.Viewer.StiViewerOptions();options.toolbar.showDesignButton = true;// Create the report viewervar viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);// Assign the onGetReportData event functionviewer.onGetReportData = function (event) {var ds = new Stimulsoft.System.Data.DataSet("Demo");ds.readJsonFile("../reports/Demo.json");    event.report.regData("Demo", "Demo", ds);}// Assign the onPrintReport event functionviewer.onPrintReport = function (event) {}// Assign the onReportExport event functionviewer.onEndExportReport = function (event) {    switch (event.format) {        case Stimulsoft.Report.StiExportFormat.Html:            event.settings.zoom = 2; // Set HTML zoom factor to 200%            break;    }}// Assign the onReportDesign event functionviewer.onDesignReport = function (event) {    alert("Design button presed.");}// Create a new report instancevar report = new Stimulsoft.Report.StiReport();// Load report from urlreport.loadFile("../reports/SimpleList.mrt");// Assign report to the viewer, the report will be built automatically after rendering the viewerviewer.report = report;// Show the report viewer in the 'content' elementviewer.renderHtml("content");

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

下载示例

标签：JavaScript 表 表设计Stimulsoft