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

（一）更改報表設(shè)計器主題

此示例顯示如何更改設(shè)計器默認主題。您需要做的就是將部分中主題的CSS文件替換為另一個可用主題，Stimlulsoft提供超過25個主題，您還可以根據(jù)需要調(diào)整CSS文件。例如，將Office2013 DarkGray Green 主題應(yīng)用于設(shè)計器：

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

示例代碼的結(jié)果如下圖所示：

（二）設(shè)計器事件

此示例顯示如何使用報表設(shè)計器事件，某些設(shè)計器操作包含訂閱的事件，例如，保存報表，創(chuàng)建新報表，預(yù)覽報表，退出設(shè)計器：

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

示例代碼的結(jié)果如下圖所示。

（三）在Designer中編輯報表模板

此示例顯示如何加載報表模板并在設(shè)計器中對其進行編輯。您需要創(chuàng)建StiReport 類型的報表對象 ，然后通過調(diào)用loadFile（） 方法加載報表模板文件 。要在設(shè)計器中編輯報表，只需將報表對象分配給設(shè)計器的報表屬性即可：

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

示例代碼的結(jié)果如下圖所示。

（四）Designer中的全屏模式

此示例顯示如何在默認情況下以全屏模式顯示報表設(shè)計器。在全屏模式下，設(shè)計器將顯示在瀏覽器窗口的所有可用區(qū)域中。要在默認情況下啟用此模式，您需要在StiDesignerOptions對象中設(shè)置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);

示例代碼的結(jié)果如下圖所示。