数据的客户端表格显示和导出到 Excel

分享于 

9分钟阅读

Web开发

  繁體 雙語

介绍

本文介绍如何使用Microsoft数据控件在客户端存储数据,并使用这里数据进行表格显示。 使用JavaScript实现了 table的排序和分页。 它还使用文件系统对象( FSO ) 将导出到Excel功能,这将把Excel文件保存到用户桌面。

背景

客户对我项目的要求是在前端显示客户数据,并导出到Excel设备。 数据大约有 100,000个记录。 数据库提取耗时长,前端无法处理数据集和DataGrid中的这么大量数据。 报告花费了大量的时间,有时线程被中止了。

这让我寻找了其他的选项,特别是在客户端处理这些需求。 我引入了of表格数据控件和文件系统对象,通过触摸它们的大部分特性。 我还添加了用于实现索引分页的JavaScript代码。

使用代码

可以从链接 上面 下载代码,这是本文的一个工作模型。 代码是用 vs 2005编写的,但也适用于 2003。 让我来解释从 Data.cs 文件( 在 App_Code 文件夹中找到) 开始的代码。

Data.cs 是我为返回逗号分隔数据而编写的类文件。 这只是为了文章的目的。 这里文件实际上可以是数据层,从中可以从数据集中的数据库提取数据。 在这种情况下,可以通过访问数据集中的值来返回逗号分隔的字符串,如下所示:

DataSet dsReport ;
StringBuilder strFinal = new StringBuilder() ;for(int colh=0; colh <dsReport.Tables[0].Columns.Count; colh++)
{
 strFinal.Append(dsReport.Tables[0].Columns[colh].ColumnName.ToString()) ;
 strFinal.Append(",");
}
strFinal.Remove(strFinal.Length-1,1);
strFinal.Append("n");for(int row=0; row <dsReport.Tables[0].Rows.Count; row++)
{
 for(int colm=0; colm <dsReport.Tables[0].Columns.Count; colm++)
 {
 strFinal.Append(dsReport.Tables[0].Rows[row][colm].ToString().Replace(",","~")) ;
 strFinal.Append(",");
 }
 strFinal.Remove(strFinal.Length-1,1);
 strFinal.Append("n");
}return strFinal.ToString();

现在进入 GetRecords.aspx 页面。 这里页面用于使用 Response 对象将数据返回到显示页。 在 Data 类文件中编写的代码可以很好地在这个页面中。 你必须注意的一点是这个页面没有任何HTML内容。 必须删除任何HTML内容,因为在显示页中检索到它时,它将被添加到 Response 对象。

现在主页,这是 TabularDisplay.aspx。

用于在客户端存储数据的对象是Microsoft数据控件。

<objectid="data2"classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"><paramname="FieldDelim"value=","/><paramname="UseHeader"value="TRUE"/><paramname="DataURL"value="GetRecords.aspx"/></object>

classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83" 将对象标识为Microsoft表格数据控件。 Microsoft数据控件的dataurl 属性引用返回 Response 对象中数据的页。 dataurl 也可以是服务器端的文本文件,格式化对象将能够读取它。 这可以由 FieldDelim 表数据控件的和 TextQualifier 属性设置。 UseHeader 属性设置为 TRUE,以便不显示 header 部分。 Microsoft表格数据控件的工作方式与数据集工作的方式相同。 为了显示它,必须将数据绑定到某些控件。 可以使用 table 或者 span 元素进行这里目的。 我在这个演示中所做的是使用JavaScript将数据动态绑定到 table。 这主要是因为报表中的列数可能一直变化,因此不能静态绑定。 这也为解决方案提供了灵活性。

填充 table 按钮生成 table。 它使用由Microsoft数据控件对象公开的属性和方法。 这里事件中的页索引也将填充。 代码是自解释的。

Microsoft数据控件还具有排序和筛选数据的选项。 它可以通过使用对象的SORT 属性直接完成。

<PARAMNAME="Sort"VALUE="-grade">

由于排序必须在当前场景中动态完成,所以我添加了JavaScript函数 SortColumn()

function sortColumn(strName) 
{
 if(strName == strColumn)
 if(strSequence == '+')
 strSequence = '-'; // Descending sequenceelse strSequence = '+'; // Ascending sequenceelse {
 strColumn = strName;
 strSequence = '+'; // Default ascending }
 document.getElementById("data2").Sort = strSequence + strColumn;
 document.getElementById("data2").Reset();
 // Update table display}

注意,这与使用数据集的DataGrid相同: 类似地,数据必须在排序后再次绑定到 table,这是由方法 Reset() 完成的。 函数在所有列上提供可选的ASC和DESC排序。 在填充表中为这里目的动态生成的标头的onclick 中调用该函数。

for (var i=0; i<dataSet.Fields.count; i++)
{
 newcell = newrow.insertCell(-1); //insert new cell to row newcell.innerHTML = "<A href=javascript:sortColumn('" + dataSet.Fields(i).name + 
 "')>" + dataSet.Fields(i).name + "</A>"//dataSet.Fields(i).name ;}

分页也使用JavaScript实现。 这里实现了两种方法:

  • 使用下一个按钮和上一个按钮
  • 使用页索引

任何一种都可以根据项目要求来使用。 需要更改 HTML table的DATAPAGESIZE 属性以指示页面大小。 这也可以使用JavaScript设置:

document.getElementById('tbldata').dataPageSize = 100 ;

导出到Excel功能是使用文件系统对象( FSO ) 实现的。 你可以从我的上一篇文章中了解有关FSO的更多信息: JavaScript__File_Handling.aspx

这里,从Microsoft数据控件中检索数据的方式与填充 table的方式相同。 生成的CSV文件直接保存到用户的桌面。

用户在创建文件时必须在指定路径中具有写访问权限。 如果存在不确定性,最好把文件写到系统的临时文件夹。 可以使用以下方法找到临时文件夹的路径:

var fileUrl = fso.GetSpecialFolder(2) + "MainReport.csv" ; 
varFileObject = fso.OpenTextFile(fileUrl, 2, true,0);

希望我已经解释好了代码。 如果需要进一步澄清,请给我写信。

使用可以下载的项目 TabularDisplay.zip

下载zip文件并将它的解压缩到任何系统文件夹。 打开 vs 2005并使用 Open--> 网站打开项目并选择文件夹。 打开 IE --> 工具 --> 因特网选项 --> 安全性。 点击可信站点并选择站点。 将服务器/localhost的URL添加为可信站点( 比如: http://localhost )。这适用于在系统中运行 ActiveX。

选择 TabularDisplay.aspx 作为StartPage并运行项目。 单击填充 table 按钮,它将从 Data.cs 页面填充数据到 table。 排序和分页也被初始化。 点击下载CSV文件。 在包含数据的桌面上创建一个CSV文件。

Points of interest

因为我们使用ActiveX对象,所以该站点应该添加到可以信网站列表中,以便在高网络安全性。 如果你觉得有用,请为这篇文章投票。


数据  EXP  tab  disp  SID  Excel  
相关文章