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

（一）報表設計器自定義

在此示例中，您可以通過更改設計器選項來了解如何自定義報表設計器。首先，您需要創建 StiDesignerOptions類對象。此類包含一組用于配置設計器外觀和行為的屬性。例如，將某些屬性更改為默認值以外的值：

// Change report designer options
var options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = true;
options.toolbar.showPreviewButton = false;
options.toolbar.showFileMenu = false;
options.components.showImage = false;
options.components.showShape = false;
options.components.showPanel = false;
options.components.showCheckBox = false;
options.components.showSubReport = false;
 
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;

示例代碼的結果如下圖所示：

（二）立即顯示報表設計器

此示例顯示如何創建報表設計器并立即顯示它，要創建報表設計器對象，您應該使用Stimulsoft.Designer命名空間中的StiDesigner Class。創建后，設計器會在創建對象的位置自動呈現自己的內容：

<script type="text/javascript">
    // Create the report designer with default options and show it in this place
    var designer = new Stimulsoft.Designer.StiDesigner();
</script>

示例代碼的結果如下圖所示。

（三）在所需位置顯示報表設計器

此示例顯示如何創建報表設計器并將其顯示在所需位置，如果要在創建后禁用設計器內容的自動呈現，請將構造函數的第三個參數設置為false。在這種情況下，將在內存中創建對象設計器：

<script type="text/javascript">
    // Create the report designer with default options
    var designer = new Stimulsoft.Designer.StiDesigner(null, "StiDesigner", false);
</script>

要顯示報表設計器，您可以使用designer.renderHtml（）方法，設計器在其中調用此方法的位置呈現自己的內容：

<script type="text/javascript">
    // Show the report designer in this place
    designer.renderHtml();
</script>

您還可以將設計器內容呈現到指定的HTML元素中，例如DIV。為此，您可以使用designer.renderHtml（“elementId”）方法：

<script type="text/javascript">
    // Show the report designer in specified element
    designer.renderHtml("designerContent");
</script>
...
<div id="designerContent">
</div>

示例代碼的結果如下圖所示。