Jul 24

[原]Spry框架:重载XML数据集,更新动态表格 晴

linuxing , 10:13 , 编程 » JavaScript , 评论(1) , 引用(0) , 阅读(23776) , Via 本站原创 | |
    在[原]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块,用于显示错误信息。

<div>
<form name="searchCompanyForm" method="post" action="#" onsubmit="queryCompany();return false;">
<table cellspacing="1" width="700px" align="center" class="formbox">
<tr>
<td class="formbox-rowheader">客户公司:<span id="sprySearch">
<label>
<input name="searchStrings" type="text" id="searchStrings" size="60" />
</label><span class="textfieldRequiredMsg">需要提供一个值。</span></span>
<input type="submit" value="搜索" class="button"/> <input type="reset" value="重置" class="button"/>
</td></tr>
</table>
</form>
</div>
<div id="companyResults" class="SpryHiddenRegion" spry:region="dsCompany">
  <div spry:state="loading">加载数据中 ...</div>
  <div spry:state="error">加载数据失败!</div>
  <div spry:state="ready">
  <table cellspacing="1" width="700px" align="center" class="formbox" spry:repeatchildren="dsCompany">
    <tr>
    <td class="formbox-rowheader" width="60px">客户名称</td>
    <td class="formbox-content">{dsCompany::name}</td>
    </tr>
    <tr>
    <td class="formbox-rowheader" width="60px">地址</td>
    <td class="formbox-content">{dsCompany::province}{dsCompany::city}{dsCompany::district}{dsCompany::address}</td>
    </tr>
  </table>
  </div>
</div>
<div id="errorDisplay"></div>

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

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

<script src="../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>

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

<script type="text/javascript">
<!--
var dsCompany=new Spry.Data.XMLDataSet();

接着,才是正式的处理代码:

var observer = function (notificationType,dataSet,data) {
  if (notificationType=="onPostLoad") {
    if (dataSet.getDataWasLoaded()) {
      var rows=dataSet.getData();
      if (String(rows[0]) == "undefined") {
        document.getElementById("errorDisplay").style.display="block";
        document.getElementById("errorDisplay").innerHTML='未找到任何匹配的记录 !';
        } else document.getElementById("errorDisplay").style.display="none";
      }
    }
  }
  
function queryCompany () {
  var searchStrings = document.getElementById("searchStrings").value;
  var query = "query_company";
  if (String(searchStrings) != "") {
    dsCompany.setURL("../xmldata.php", //设置新的XML数据源,也可以使用GET方式
    {method:"POST",postData:"action=search&child="+query+"&"+query+"="+searchStrings,
    headers:{"Content-Type":"application/x-www-form-urlencoded;charset=utf-8"},useCache:false});
    dsCompany.setXPath("companys/company"); //设置XPath参数
    dsCompany.addObserver(observer); //设置区域观察者函数
    dsCompany.loadData(); //加载数据
  } else document.getElementById("searchStrings").value = "请输入需查询的公司名称";
  }

可见,这里通过重设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规则:

<style type="text/css">
.SpryHiddenRegion {
  visibility: hidden;
}
</style>

并将该类应用到Spry区域:

<div id="companyResults" class="SpryHiddenRegion" spry:region="dsCompany">

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

<td class="formbox-content"><span spry:content="{dsCompany::name}"></span></td>

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

总结:修改后的代码,充分利用了Spry框架提供的DataSet 数据访问和显示功能。因此,后续还可以根据需要添加数据排序、分页视图等功能。
源码:
Tags:
bar
2009/08/26 23:22
这文章不错,感觉好爽,支持你.
informal gratis spiele and gratis spiele
分页: 1/1 第一页 1 最后页
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]