客户端表格数据视图和导出到 Excel

• 下载源代码 - 7.26 KB

引言

本文档介绍如何使用Microsoft Tabular Data控件在客户端存储数据，并使用这些数据进行表格显示。表格通过JavaScript实现了排序和分页功能。此外，还提供了一个使用文件系统对象（FSO）导出到Excel的功能，该功能会将Excel文件保存到用户的桌面。

背景

我项目的客户端需求是在前端显示客户数据，并具备导出到Excel的功能。数据量约为100,000条记录。数据库检索耗时较长，前端无法处理如此大量的数据到DataSet和DataGrid中。报表生成耗时过长，有时甚至会导致线程中止。

这促使我寻找其他解决方案，特别是将这些需求转移到客户端处理。我偶然发现了Microsoft Tabular Data控件和文件系统对象，我通过充分利用它们的功能来实现这些需求。我还添加了JavaScript代码来实现索引分页。

使用代码

代码可以从上面的链接下载，这是一个可工作的演示版本。代码是用VS 2005编写的，但也适用于VS 2003。下面我将开始解释代码，从Data.cs文件开始（位于App_Code文件夹中）。

Data.cs是我编写的一个用于返回逗号分隔数据的类文件。这只是为了本文档的演示目的。这个文件实际上可以作为您的数据层，您可以在其中从数据库中获取数据到DataSet。在这种情况下，您可以通过访问DataSet中的值来返回一个逗号分隔的字符串，例如：

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 Tabular Data控件。

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

classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"将此对象标识为Microsoft Tabular Data控件。Microsoft Tabular Data控件的dataurl属性引用返回数据的页面，该数据通过Response对象传输。DataUrl也可以是服务器端的一个文本文件，其格式应能被对象读取。这可以通过Microsoft Tabular Data控件的FieldDelim和TextQualifier属性来设置。UseHeader属性设置为TRUE，这样就不会显示标题部分。Microsoft Tabular Data控件的工作方式与DataSet类似。数据必须绑定到某个控件才能显示。表或span元素可用于此目的。我在这个演示中通过JavaScript动态地将数据绑定到一个表。这主要是因为报表的列数可能会随时变化，因此无法静态绑定。这同时也为解决方案提供了灵活性。

“填充表格”按钮用于构建表格。它使用Microsoft Tabular Data控件对象暴露的属性和方法。页面索引也在此事件中填充。代码是自解释的。

Microsoft Tabular Data控件还提供了排序和过滤数据的选项。这可以直接通过使用对象的SORT属性来完成。

<PARAM NAME="Sort" VALUE="-grade">

由于在当前场景下需要动态进行排序，我添加了JavaScript函数SortColumn()。

function sortColumn(strName) 
{
    if(strName == strColumn)
        if(strSequence == '+')
            strSequence = '-';   // Descending sequence
        else
            strSequence = '+';   // Ascending sequence
    else {
        strColumn = strName;
        strSequence = '+';       // Default ascending
    }

    document.getElementById("data2").Sort = strSequence + strColumn;
    document.getElementById("data2").Reset();
    // Update table display
}

请注意，这与使用DataSet的DataGrid类似：以类似的方式，在排序后必须将数据再次绑定到表格，这通过Reset()方法完成。该函数为所有列提供交替的升序和降序排序。该函数在“填充表格”期间动态生成的表头的`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实现。这里实现了两种方法：

1. 使用“下一页”和“上一页”按钮
2. 使用页面索引

可以根据项目需求选择其中一种方法。HTML表格的DATAPAGESIZE属性需要修改以指示页面大小。这也可以通过JavaScript来设置。

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

导出到Excel功能是使用文件系统对象（FSO）实现的。您可以从我之前的文章中了解更多关于FSO的信息：JavaScript__File_Handling.aspx。

在这里，数据从Microsoft Tabular Data控件中检索，方式与填充表格类似。生成的CSV文件直接保存到用户的桌面上。

用户必须在创建文件时指定的路径中拥有写入权限。在不确定时，最好将文件写入系统的临时文件夹。Temp文件夹的路径可以通过以下方式找到：

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

希望我已将代码解释清楚。如果需要进一步澄清，请写信给我。

使用可下载的项目TabularDisplay.zip

下载zip文件并将其解压到任何系统文件夹。打开VS 2005，然后通过“打开”->“网站”打开项目，并选择文件夹。打开IE -> “工具” -> “Internet选项” -> “安全”。单击“受信任的站点”并选择“站点”。将您的服务器/localhost的URL添加为受信任的站点（例如：https://）。这是为了让ActiveX在系统中运行。

将TabularDisplay.aspx设置为启动页并运行项目。单击“填充表格”按钮，这将把Data.cs页面中的数据填充到表格中。排序和分页也已初始化。单击“下载CSV文件”。一个包含数据的CSV文件将被创建在您的桌面上。

关注点

由于我们使用ActiveX对象，在互联网安全级别较高的情况下，应将该网站添加到受信任站点列表中。如果您觉得本文有用，请为本文评分。