Genius Open HTML Generator - 如何轻松创建精彩报表

• 下载源代码 - 958.76 KB

注意：您可以在 APIReport 的此处下载最新版本。

引言

想象一下这样一个世界：您只需 4 行代码就可以从 MSSQL 查询（或数据表）生成一个出色的 HTML 表格，一个具有排序、高亮显示、漂亮背景颜色且完全可自定义的 HTML 表格。

这就是 APIReport。它完全免费且开源！

以下是生成此表格的代码

DocumentHTML myDoc = new DocumentHTML();
ReportSectionData myData = new ReportSectionData
	("select * FROM tblClient",connectionString));
myDoc.addSectionData(myData);
string myResultHTML = 
	myDoc.getResult(true,true); //set active the sorting and highlighting  
Note : ReportSectionData myData = 
	new ReportSectionData(myDataTable); //would be just fine as well...

背景

这个项目始于一个瑞典人提出的问题：如何从我的代码中极其快速、轻松地生成 HTML 表格？然而，一切都必须完全可定制。

我在一个开发者论坛上找到了他的代码，并尝试联系他，但没有成功。那是 6 个月前的事了，那个论坛现在也无法访问了。我决定改进这个概念，并添加一些不错的功能，比如添加图片、图表、文本、排序、高亮显示等方式。

最后，由于做了大量工作，创建了一个包含该库的网站。因此，您可以在 APIReport.com 网站下载该库。
APIReport 是 Happy/API 和 report 的双关语。
这就是故事……现在让我们开始吧！

Using the Code

这个概念很简单。
首先，我们定义一个 DocumentHML。这是将添加不同部分的主文档。

DocumentHTML myDoc = new DocumentHTML();

然后，我们定义要添加的部分。共有 4 种类型的部分：数据、文本、图片、图表。

ReportSectionData myData = new ReportSectionData
	("select * FROM tblClient",connectionString));

或

ReportSectionText myText = new ReportSectionText("This is my happy sample");

或

ReportSectionImage myImage = new ReportSectionImage("sampleImage.jpg") ;

或

ReportSectionGraph myGraph = new ReportSectionGraph
	(800,600,myTitle,"myGraph.png","SELECT * FROM tblSale");

当然，每个对象都可以深度定制：颜色、图表类型、大小、字体等。

然后我们将这些部分添加到文档中

myDoc.add(myData);
myDoc.add(myText);
myDoc.add(myImage);
myDoc.add(myGraph); 

这里您将得到一个包含 4 个部分的文档。您可以根据需要添加任意多个部分。

最后，我们生成 HTML 代码

 string myResultHTML = 
	myDoc.getResult(true,true); //set active the sorting and highlighting 

就这样，伙计们！既然您已经理解了这个概念，那么让我们来看看所使用的功能和技术。

数据节

构建数据部分对象时，您可以提供一个 DataTable 或 MSSQL 查询（带连接字符串）。
顺便说一句，您还可以定义如何反转给定数据的行和列。当您提供一个小型查询并希望通过反转行和列来突出显示数据时，这会特别方便。

数据表将只在最后阶段真正生成为 HTML。因此，您首先可以定义和自定义所有您想要的东西。表格的每个单元格都有字体、背景颜色和前景色。要更改它，您可以直接使用相关的公共属性：例如

myData.BgColorCells[2][1] = Color.Red;

同样，您可以定义对齐方式、外边框（宽度和颜色）、内边框（宽度和颜色）、是否显示标题、列大小、表格大小、单元格内边距（您可以区分水平和垂直内边距）。

每个单元格都以相同的格式生成 HTML

p

 <td align = "left" style="font-size:12px;border-top-color:#000000;
border-top: 1px solid #000000;border-bottom-color:#D3D3D3;
border-bottom: 1px solid #D3D3D3;border-left-color:#000000;
border-left: 1px solid #000000;border-right-color:#808080;
border-right: 1px solid #808080 " width="36" height="24" bgcolor="#FFFFFF">
<font color = "#000000">THIS IS MY TEXT </font></td> 

如您所见，所有参数都必须为每个单元格生成。此代码在 Internet Explorer 7.0、Firefox 3.5 和 Chrome 2.0 中给出了相似的结果（这些是我测试过的所有版本）。
定义所有参数的缺点是生成的代码会更长（即使对于小表格，也可能相当长）。

高亮显示和排序

最后，关于数据部分，我必须谈谈高亮显示属性和排序属性。这两个方法都使用 JavaScript 代码。它们应用于所有 HTML 文档。因此，例如，如果一个文档中有多个表格，并且您希望排序方法起作用，那么它将对所有表格起作用。

高亮显示属性由 F.Permadi 编写，排序属性来自 这个网站。
这两个代码都经过了压缩和混淆。

它是如何工作的？

高亮显示：我们在 table 标签中添加以下代码

"onMouseOver="javascript:trackTableHighlight(event,'#DDDDDD')" 
onMouseOut="javascript:highLightTableRow(0);"

就是这样。它运行得非常好，我们不需要在每一行中添加这个属性。

排序：我们在 table 标签中添加以下代码

"class = "sortable""

就是这样。如果您使用排序，外边框和内边框应该具有相同的颜色，表格中的所有单元格也应该具有相同的颜色...

绘图器

绘图器是用来绘制表格的……例如，您希望所有低于零的单元格的背景颜色为红色。
正如您所猜测的，您可以通过以下方式简单地定义每个低于零的单元格

myData.BgColorCells[i][j] = Color.Red; 

其中 [i][j] 定义了低于零的单元格。
但有一个更好、更简洁的方法

Painter myPainter = new Painter("0",ActionZone.cell,ConditionType.small,-1,3,Color.Red);
myData.add(myPainter); 

工作完成了。我让您自己享受发现每个参数含义的乐趣，但这非常简单。

所有的数据部分都已解释完毕，这最初是该项目开发的原因。现在，文本、图表和图像部分已在后期添加，以使其更完整和更有趣。

文本部分

它非常易于使用。您创建一个带有文本的部分，可以定义字体、颜色和对齐方式……没什么好说的。

ReportSectionText myText = new ReportSectionText("This is my <i>funny</i> sample")
myText.Alignment = ContentAlignment.MiddleCenter;
myText.FontText = new Font("Times new roman",15.0F,FontStyle.Bold);
myText.ForeColor = Color.DarkRed; 

在您的文本中，可以包含 HTML 代码。当文档生成时，这些代码将直接添加。

ReportSectionImage myReportSectionImage = new ReportSectionImage(@"C:\sampleImage.jpg");
myReportSectionImage.Position = Position.center; 

一个非常简单的巧妙之处是：您可以定义一个相对路径，图片将被复制并由 HTML 文档使用。

图表部分

图表部分允许根据数据生成和插入图表。这相当神奇。嗯，不完全是魔法，但相当不错。所以您可以这样定义您的部分

ReportSectionGraph myReportSectionGraph = new ReportSectionGraph
	(800, 600, "Benefice done by the company the last year", "Date", 
	"Benefice in EURO", "imgSampleGraph.png", myDataTable); 

第一列将始终是 X 轴，其他每列都将是一个新的曲线。
注意：如果第一列是日期时间类型，那么它将被按原样解释，并进行适当的缩放。

之后您可以定义曲线的宽度、图表的类型、图表的颜色。
这是一个包含 4 列的数据表的示例

myGraph.ArWidthLine = new float[] {3F,1F,1F};
myGraph.ArTypeGraph = new TypeGraph[]{TypeGraph.curve,TypeGraph.curve, TypeGraph.bar};
myGraph.ArColorGraph = new Color[]{Color.Red,Color.Green,Color.Tan}; 

这是我们示例的结果

所有列（除了第一列）都必须包含数字。例如，“3500 USD”将被解释为“3500”。因此，正则表达式只会提取数字：“(-)?\d+(.\d+)?”

图表是借助 zedgraph 库生成的。

关注点

• 简单而简洁：这是最初的想法。用 4 行简单的代码制作一份报告，无需为额外的文件、额外的知识等烦恼。
• 完全可定制：即使报告可以很简洁，您也应该并且可以精确地定义报告中的所有内容。
• 绘图器：绘制报告的概念相当不错。
• 多浏览器：APIReport 生成的代码在 Internet Explorer、Firefox 或 Chrome 上具有相同的结果（我没有测试 Safari、Opera 或其他浏览器）。
• 开放：当然，这个项目还有待改进，远非完美。这就是为什么这个项目对社区开放的原因。论坛、问题、答案、最新版本都可以在这里找到。

历史

• 10 月 23 日：首次发布

我希望您能像我一样喜欢这个项目。
祝您有个愉快的一天！

Steven Darsin