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

此示例顯示如何從JavaScript代碼創(chuàng)建和打印數據表，作為輸入，使用JSON數據定義文本區(qū)域并允許更改此數據：

<textarea name="jsonString" id="jsonString" style="width: 440px; height: 200px;">
{
    "Table1" : [{
        "Column1" : "1",
        "Column2" : "One"
        }, {
        "Column1" : "2",
        "Column2" : "Two"
        }, {
        "Column1" : "3",
        "Column2" : "Three"
    }]
}
</textarea><br />
<input type="submit" value="Show" onclick="onShowClick()" />

在按鈕單擊事件onShowClick（）上創(chuàng)建一個報表及其所有組件與代碼。首先，創(chuàng)建一個新報表并為其準備數據：

function onShowClick() {
    var jsonData = JSON.parse(jsonString.value);
 
    var dataSet = new Stimulsoft.System.Data.DataSet();
    dataSet.readJson(jsonData);
    var data = dataSet.tables.getByIndex(0);
 
    var report = new Stimulsoft.Report.StiReport();
 
    //Add data to datastore
    report.regData("data", "data", dataSet);
 
    //Fill dictionary
    var dataSource = new Stimulsoft.Report.Dictionary.StiDataTableSource(data.tableName, data.tableName, data.tableName);
    dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("Column1", "Column1", "Column1"));
    dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("Column2", "Column2", "Column2"));
    report.dictionary.dataSources.add(dataSource);

接下來，在報表中添加標題區(qū)和數據區(qū)：

 var page = report.pages.getByIndex(0);
 
    //Create HeaderBand
    var headerBand = new Stimulsoft.Report.Components.StiHeaderBand();
    headerBand.height = 0.5;
    headerBand.name = "HeaderBand";
    page.components.add(headerBand);
 
    //Create Databand
    var dataBand = new Stimulsoft.Report.Components.StiDataBand();
    dataBand.dataSourceName = data.tableName;
    dataBand.height = 0.5;
    dataBand.name = "DataBand";
    page.components.add(dataBand);

接下來，將文本框上的數據的標題 頁眉區(qū)域，和文本框參照上的數據源字段——Data Band：

//Create texts
    var pos = 0;
 
    var columnWidth = Stimulsoft.Base.StiAlignValue.alignToMinGrid(page.width / data.columns.count, 0.1, true);
 
    var nameIndex = 1;
 
    for (var index in data.columns.list) {
        var dataColumn = data.columns.list[index];
        //Create text on header
        var headerText = new Stimulsoft.Report.Components.StiText();
        headerText.clientRectangle = new Stimulsoft.Base.Drawing.RectangleD(pos, 0, columnWidth, 0.5);
        headerText.text = dataColumn.caption;
        headerText.horAlignment = Stimulsoft.Base.Drawing.StiTextHorAlignment.Center;
        headerText.name = "HeaderText" + nameIndex.toString();
        headerText.brush = new Stimulsoft.Base.Drawing.StiSolidBrush(Stimulsoft.System.Drawing.Color.lightGreen);
        headerText.border.side = Stimulsoft.Base.Drawing.StiBorderSides.All;
        headerBand.components.add(headerText);
 
        //Create text on Data Band
        var dataText = new Stimulsoft.Report.Components.StiText();
        dataText.clientRectangle = new Stimulsoft.Base.Drawing.RectangleD(pos, 0, columnWidth, 0.5)
        dataText.text = String.format("{{0}.{1}}", data.tableName, dataColumn.columnName);
        dataText.name = "DataText" + nameIndex.toString();
        dataText.border.side = Stimulsoft.Base.Drawing.StiBorderSides.All;
 
        //Add highlight
        var condition = new Stimulsoft.Report.Components.StiCondition();
        condition.backColor = Stimulsoft.System.Drawing.Color.cornflowerBlue;
        condition.textColor = Stimulsoft.System.Drawing.Color.black;
        condition.expression = "(Line & 1) == 1";
        condition.item = Stimulsoft.Report.Components.StiFilterItem.Expression;
        dataText.conditions.add(condition);
 
        dataBand.components.add(dataText);
 
        pos = pos + columnWidth;
 
        nameIndex++;
    }

然后，添加Footer Band與Text Box用于顯示報表Total value：

  //Create FooterBand
    var footerBand = new Stimulsoft.Report.Components.StiFooterBand();
    footerBand.height = 0.5;
    footerBand.name = "FooterBand";
    page.components.add(footerBand);
 
    //Create text on footer
    var footerText = new Stimulsoft.Report.Components.StiText();
    footerText.clientRectangle = new Stimulsoft.Base.Drawing.RectangleD(0, 0, page.width, 0.5);
    footerText.text = "Count - {Count()}";
    footerText.horAlignment = Stimulsoft.Base.Drawing.StiTextHorAlignment.Right;
    footerText.name = "FooterText";
    footerText.brush = new Stimulsoft.Base.Drawing.StiSolidBrush(Stimulsoft.System.Drawing.Color.lightGreen);
    footerBand.components.add(footerText);

最后，渲染報表并在查看器中顯示它：

   //Render report
    report.render();
 
    viewer.report = report;
};

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