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

（一）報表設(shè)計器自定義

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

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

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

（二）立即顯示報表設(shè)計器

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

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

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

（三）在所需位置顯示報表設(shè)計器

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

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

要顯示報表設(shè)計器，您可以使用designer.renderHtml（）方法，設(shè)計器在其中調(diào)用此方法的位置呈現(xiàn)自己的內(nèi)容：

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

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

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

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