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

原创|使用教程|编辑:王香|2018-08-06 17:32:00.000|阅读 671 次

概述:本文详细介绍了如何从JavaScript代码创建和打印数据表

相关链接:

【下载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;
};

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

print-table-from-code

下载示例



标签:JavaScript 报表Stimulsoft

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Stimulsoft Reports.JS

一个使用JavaScript和HTML5的报表生成平台

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat