【Stimulsoft Reports.JS教程】从代码打印表

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

此示例显示如何从JavaScript代码创建和打印数据表，作为输入，使用JSON数据定义文本区域并允许更改此数据：

<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（）上创建一个 表及其所有组件与代码。首先，创建一个新 表并为其准备数据：

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

接下来，在 表中添加标题区和数据区：

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

接下来，将文本框上的数据的标题 页眉区域，和文本框参照上的数据源字段——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;};

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

下载示例

标签：JavaScript 表Stimulsoft