将隐藏数据包含在HTML页面中以供javascript处理

时间:2011-01-20 09:23:34

标签: javascript html embed

我根据数据库中的数据生成一个复杂的HTML摘要报告,该报告可能是数据库中可能有200,000行的摘要。用户可以单击链接以请求Excel版本。

当他们这样做时,JS脚本会提取报告的关键组件,并将它们填充到隐藏的iframe中的表单中。此表单提交到服务器端脚本,该脚本生成报告的Excel版本(没有图形等)。

由于报告的计算复杂且“代价高昂”,因此不再需要再次运行它们来创建Excel版本,因为所有数据都已在页面上。用户也可以在加载后自定义报告,并且我可以使用JS将这些首选项传递给表单,以便Excel文档也反映它们。

我这样做的方法是在报表的每个组件中包含以下内容,以转移到Excel版本中的一行。我已经劫持了一个没有使用过的HTML标签。

   <code id="xl_row_211865_2_x" class="rowlabel">Musicals}{40%}{28.6%}{6</code>

上面的代码元素是HTML报告中下面一行的摘要,该行在Excel文档中成为一行,并包含标签和各种数据元素。一份报告中可能有一千个或更多这样的元素。

alt text

由于数据包含文本,我必须使用}{之类的字符作为字段分隔符,因为这不太可能出现在报表的任何真实文本中。我将code设置为在CSS中显示:none。

当用户想要他们的报告的Excel版本时,JS代码在HTML中搜索任何<code>元素,并将他们的className和innerHTML放在表单中。 className指示如何在Excel中格式化行,然后将数据放入Excel行的相邻单元格中。

alt text

HTML报告显示一个百分比基数(它们可以在它们之间切换),但请求Excel版本时的用户首选项包括两者。

有更好的方法吗?

(由于这是一个复杂的网络应用程序的一部分,没有用户会关闭CSS或缺乏JavaScript或他们不会得到这么远) 补充:我不能使用HTML5,因为用户通常是IE6等旧版浏览器上的企业

4 个答案:

答案 0 :(得分:12)

标准解决方案:

1)使用Javascript数据块:

<script>
var mydata = {
         'Musicals': ['6','40%','28.6%'],
         "That's Life": ['2','13.2%','0.5%'],
         ...etc....
      }
</script>

2)使用元素属性: (有关详细信息,请参阅http://ejohn.org/blog/html-5-data-attributes/

<div class='my_data_row' data-name='Musicals' data-col1='6' data-col2='40%' data-col3='26.6%'>

...然后使用Javascript根据需要加载属性。

当数据与相关元素相关时,将使用第二个选项。您通常不希望将此用于将在其他地方使用的数据;我会说,在你的情况下,简单的Javascript数据块将是一个更好的解决方案。

如果您确实按照第二个选项使用数据属性,请注意在属性上使用'data-'前缀。这是一个HTML5规范,它将用户定义的属性与普通的HTML属性分开。有关详细信息,请参阅链接页面。

答案 1 :(得分:11)

使用新数据属性

http://www.javascriptkit.com/dhtmltutors/customattributes.shtml

<div data-row="[[&quot;Musicals&quot;,40,28.6,6], ...]">

div可以是TD代码或TR代码或与该行相关的任何其他相关代码,而&quot;是已转义的"

这使数据隐藏在视图之外,并确保将有标准的解决方案来处理数据。

对于编码数据,我建议使用JSON,因为这也是一个易于使用的标准。

答案 2 :(得分:2)

您可以尝试 new html5功能localStorage,而不是使用隐藏的html字段,即如果您确定您的用户使用仅最新的现代浏览器。

无论如何,对代码的改进是以JSON格式实际存储数据:
而不是

Musicals}{40%}{28.6%}{6

你会使用像

这样的东西
{
    "label": "Musicals",
    "percentage1": 40,
    "percentage2": 28.6,
    "otherLabel": 6
}

这样你就可以通过评估(eval)或解析(JSON.parse)隐藏元素的innerHTML来构建javascript对象,比你解释自己的花括号更快协议

答案 3 :(得分:1)

我更好地解决这个问题的方法是将这些结果保存在服务器中的一些临时XML文件中,在浏览器中显示内容,当用户请求Excel版本时,您只需要时态XML。

看看Linq-to-XML,因为它的流畅式编程可以帮助您在几行中读取XML文件,然后创建这样的Excel文件。

另一种解决方案是将对象集序列化为JSON,并使用DataContractJsonSerializer对它们进行反序列化。这会使临时文件的大小小于XML方法。