[原]Spry框架：重载XML数据集，更新动态表格

    在Spry框架：XML数据集一文中，我们描述了Spry架构中，利用XML数据集发布数据的方式。其中，一种是在加载页面时生成XML数据集并生成表格显示；另一种是根据用户的输入，生成实时的XML数据集，然后通过innerHTML方式生成表格。这两种方式都很常用，但是方式二存在问题，就是没有使用Spry 表格来生成，这缺点是明显的：JavaScript代码编写麻烦，功能单一。相反，若能借助Spry 表格提供的排序、主从详细列表等功能无疑是更好的解决方法。
    我参考的书籍没有找到可供参考的例子，幸亏通过重新翻阅Spry的API说明，测试后终于找到可行的办法。

一、参考资料
我主要参考的资料有如下这些，下面中提到的语法标记在下面的链接中都有很详细的描述：
Spry 官网：这是最权威的资料，可下载最新的库版本；
Learning Spry：官网的资料库，提供了不少参考例子；
Spry 数据集和动态区概览：这是中文版的使用说明，基本涵盖了常用的语法；
Spry框架初步入门：jerryinside翻译和提供的20个Spry Data的常用知识点；
由于使用Spry的人似乎并不多，网上可供参考的资料大部分来自官方的API说明，因此，很多功能都需要逐步尝试才能实现。

二、代码说明
其实，要实现本文开头提到的功能并不困难。
1、HTML代码
前面部分供用户输入的提示框代码是相同的，关键是后面companyResults块部分，已经Spry表格的代码预先写好。
另外，因若没有生成XML数据集（例如寻找的结果不存在等），Spry表格默认会自动隐藏。所以，为了把错误结果反馈到页面上，还加入了一个errorDisplay块，用于显示错误信息。

※ 注意，用于显示Spry表格的div块，需要位于body的下一层，不能嵌套在其他div块里面，否则会失效。

2、JavaScript代码
JavaScript部分，首先需要导入Spry Data框架库：

然后，编写生成Spry DataSet的代码，因在页面加载时并没有可用的xml数据源，但HTML代码中却已经写入了固定的引用语法，所以，我们需要先创建一个空的Spry.Data.XMLDataSet对象：

接着，才是正式的处理代码：

可见，这里通过重设XML数据源和XPath参数，以重定位新的XML DataSet来源信息。当设定完毕后，必须使用loadData()方法重载数据集，并刷新HTML部分的内容。
observer 是一个函数引用，用于实现区域观察者的功能。若没有该观察者，则当XML数据源加载失败时，因没有通知机制，所以页面上是不会有任何显示信息的。（Spry表格被隐藏）而该观察者能在XML数据加载完毕时，对数据进行检查，根据需要向页面提供帮助信息。
我这里为了描述其功能，特意由JavaScript来生成errorDisplay块的内容。当然，你也可以对xmldata.php进行改进，当获取XML数据失败时，返回的也一个XML DataSet，然后根据rows[0]等来输出更清晰的帮助信息。

3、CSS补充
在某些浏览器中（包括IE 7），如果加载Spry网页连接速度比较慢，则有可能导致用户在页面的onload通知发送之前看到未处理区域和页面上的数据引用，例如{name}、{address}等。
若要隐藏未处理的区域和数据引用，可以提供定义一个类名为SpryHiddenRegion的CSS规则：

并将该类应用到Spry区域：

这样，在页面加载时CSS会隐藏这个Spry区域。而当Spry数据完成处理时，Spry将去掉SpryHiddenRegion类并出现完成后的Spry内容。但这个与创建XML数据集失败而隐藏Spry区域的情况是不同的，它们发生在不同的阶段。
还有另一种方法来隐藏数据引用，即使用spry:content属性来代替数据引用。由于spry:content属性的值就是数据引用，在页面加载过程它是不可见的。

但这个语法写起来没有CSS类方便。

总结：修改后的代码，充分利用了Spry框架提供的DataSet 数据访问和显示功能。因此，后续还可以根据需要添加数据排序、分页视图等功能。
源码：

下载文件

点击这里下载文件