Spry框架实现XML分页[原]

Spry是DW CS3自带的一个javascript框架，其封装了许多以往需要用手写脚本来完成的工作，在一定程度上来说，使用熟练了还是蛮方便的，毕竟这是流行的三大脚本框架之一，在实现Ajax方面也有很独到的地方。

这里例举出使用Spry框架来操作XML实现分页的功能！

实现xml分页这里只需要用到框架中的三个js文件即可SpryData.js、xpath.js和SpryPagedView.js，其中SpryPagedView.js是其后续补丁中提供的一个js库，而前面的两个js库则在安装落伍Spry框架之后可以在安装文件中查找到！

这三个js文件大家可以自己到官方网站等许多地方下载到，这里就不提供了！

用于分页的xml文件DataSourceHuashanlin.xml

<?xml version="1.0" encoding="utf-8"?>
<Messages>
  <message>
     <title>“祥云”绕峨眉川歌迎圣火</title>
     <url>http://www.ba5idu.com</url> 
  </message>
  <message>
     <title>诺贝尔文学奖得主索尔仁尼琴去世</title>
     <url>http://www.baid54u.com</url> 
  </message>
  <message>
     <title>肖余恨：安徽砀山两风办越牛人治痕迹越浓</title>
     <url>http://www.baidu4.com</url> 
  </message>
  <message>
     <title>和总理一起“保证北京永远干净”</title>
     <url>http://www.baidu2.com</url> 
  </message>
  <message>
     <title>官员公布电话以体民意 问题解决非省长不可</title>
     <url>http://www.bai12du.com</url> 
  </message>
  <message>
     <title>美国总统候选人奥巴马竞选飞机揭秘：极尽豪华</title>
     <url>http://www.bai21du.com</url> 
  </message>
  <message>
     <title>“祥云”绕峨眉川歌迎圣火2</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>诺贝尔文学奖得主索尔仁尼琴去世2</title>
     <url>http://www.ba8idu.com</url> 
  </message>
  <message>
     <title>肖余恨：安徽砀山两风办越牛人治痕迹越浓2</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>和总理一起“保证北京永远干净”2</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>官员公布电话以体民意 问题解决非省长不可2</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>美国总统候选人奥巴马竞选飞机揭秘：极尽豪华2</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>“祥云”绕峨眉川歌迎圣火3</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>诺贝尔文学奖得主索尔仁尼琴去世3</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>肖余恨：安徽砀山两风办越牛人治痕迹越浓3</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>和总理一起“保证北京永远干净”3</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>官员公布电话以体民意 问题解决非省长不可3</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>美国总统候选人奥巴马竞选飞机揭秘：极尽豪华3</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>“祥云”绕峨眉川歌迎圣火4</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>诺贝尔文学奖得主索尔仁尼琴去世4</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>肖余恨：安徽砀山两风办越牛人治痕迹越浓4</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>和总理一起“保证北京永远干净”4</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>官员公布电话以体民意 问题解决非省长不可4</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>美国总统候选人奥巴马竞选飞机揭秘：极尽豪华4</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>“祥云”绕峨眉川歌迎圣火5</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>诺贝尔文学奖得主索尔仁尼琴去世5</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>肖余恨：安徽砀山两风办越牛人治痕迹越浓5</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>和总理一起“保证北京永远干净”5</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>官员公布电话以体民意 问题解决非省长不可5</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>美国总统候选人奥巴马竞选飞机揭秘：极尽豪华5</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>“祥云”绕峨眉川歌迎圣火6</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>诺贝尔文学奖得主索尔仁尼琴去世6</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>肖余恨：安徽砀山两风办越牛人治痕迹越浓6</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>和总理一起“保证北京永远干净”6</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>官员公布电话以体民意 问题解决非省长不可6</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>美国总统候选人奥巴马竞选飞机揭秘：极尽豪华6</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>“祥云”绕峨眉川歌迎圣火7</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>诺贝尔文学奖得主索尔仁尼琴去世7</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>肖余恨：安徽砀山两风办越牛人治痕迹越浓7</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>和总理一起“保证北京永远干净”7</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>官员公布电话以体民意 问题解决非省长不可7</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>美国总统候选人奥巴马竞选飞机揭秘：极尽豪华7</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>“祥云”绕峨眉川歌迎圣火8</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>诺贝尔文学奖得主索尔仁尼琴去世8</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>肖余恨：安徽砀山两风办越牛人治痕迹越浓8</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>和总理一起“保证北京永远干净”8</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>官员公布电话以体民意 问题解决非省长不可8</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>美国总统候选人奥巴马竞选飞机揭秘：极尽豪华8</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>“祥云”绕峨眉川歌迎圣火9</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>诺贝尔文学奖得主索尔仁尼琴去世9</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>肖余恨：安徽砀山两风办越牛人治痕迹越浓9</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>和总理一起“保证北京永远干净”9</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>官员公布电话以体民意 问题解决非省长不可9</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>美国总统候选人奥巴马竞选飞机揭秘：极尽豪华9</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>“祥云”绕峨眉川歌迎圣火10</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>诺贝尔文学奖得主索尔仁尼琴去世10</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>肖余恨：安徽砀山两风办越牛人治痕迹越浓10</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>和总理一起“保证北京永远干净”10</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>官员公布电话以体民意 问题解决非省长不可10</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>美国总统候选人奥巴马竞选飞机揭秘：极尽豪华10</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>“祥云”绕峨眉川歌迎圣火11</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>诺贝尔文学奖得主索尔仁尼琴去世11</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>肖余恨：安徽砀山两风办越牛人治痕迹越浓11</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>和总理一起“保证北京永远干净”11</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>官员公布电话以体民意 问题解决非省长不可11</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>美国总统候选人奥巴马竞选飞机揭秘：极尽豪华11</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>“祥云”绕峨眉川歌迎圣火12</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>诺贝尔文学奖得主索尔仁尼琴去世12</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>肖余恨：安徽砀山两风办越牛人治痕迹越浓12</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>和总理一起“保证北京永远干净”12</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>官员公布电话以体民意 问题解决非省长不可12</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>美国总统候选人奥巴马竞选飞机揭秘：极尽豪华12</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>“祥云”绕峨眉川歌迎圣火13</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>诺贝尔文学奖得主索尔仁尼琴去世13</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>肖余恨：安徽砀山两风办越牛人治痕迹越浓13</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>和总理一起“保证北京永远干净”13</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>官员公布电话以体民意 问题解决非省长不可13</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>美国总统候选人奥巴马竞选飞机揭秘：极尽豪华13</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>“祥云”绕峨眉川歌迎圣火14</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>诺贝尔文学奖得主索尔仁尼琴去世14</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>肖余恨：安徽砀山两风办越牛人治痕迹越浓14</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>和总理一起“保证北京永远干净”14</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>官员公布电话以体民意 问题解决非省长不可14</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>美国总统候选人奥巴马竞选飞机揭秘：极尽豪华14</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>“祥云”绕峨眉川歌迎圣火15</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>诺贝尔文学奖得主索尔仁尼琴去世15</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>肖余恨：安徽砀山两风办越牛人治痕迹越浓15</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>和总理一起“保证北京永远干净”15</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>官员公布电话以体民意 问题解决非省长不可15</title>
     <url>http://www.baidu.com</url> 
  </message>
  <message>
     <title>美国总统候选人奥巴马竞选飞机揭秘：极尽豪华15</title>
     <url>http://www.baidu.com</url> 
  </message>
</Messages>

pager1.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SpryXML</title>
<style type="text/css">
ul{text-align:left;
list-style:none;
}
span{
cursor:hand;
}
</style>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryPagedView.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MadeCheckPage(rowsCount)
{
    var temp="<select name='pag' onchange='pageview.goToPage(this.value);'";
    for(var i=0;i<=rowsCount;i++)
    {
        temp+="<option value='"+i+"'>"+i+"</option>";
    }
    temp+="</select>";
    return temp;
}
function check(SelectName,OptionValue)
{
    for (var i=0;i<SelectName.options.length ;i++ )
    {
        if (SelectName.options(i).value==OptionValue)
        {
            SelectName.selectedIndex =i;
        }
    }
}


var a=0;
var doc = new Spry.Data.XMLDataSet("DataSource2.xml", "Messages/message",{useCache:false});

var pageview=new Spry.Data.PagedView(doc,{pageSize:10,forceFullPages:true});

var pageinfo=pageview.getPagingInfo();

//-->
</script>
</head>

<body>
<div id="warp" spry:region="pageview">
    <ul spry:repeatchildren="pageview">
        <li><a href="{url}">{title}</a></li>
    </ul>
</div>
<span onclick="pageview.firstPage();">首 页</span>
<span onclick="pageview.previousPage();">上一页</span>
<span onclick="pageview.nextPage();">下一页</span>
<span onclick="pageview.lastPage();">末 页</span>

<div id="PG"></div>
<p spry:region="pageinfo">
<script type="text/javascript">
document.getElementById("PG").innerHTML=MadeCheckPage({ds_RowCount});
var ou={ds_CurrentRowNumber};
var cc=document.getElementById("pag");
//check(cc,ou+1);
cc.selectedIndex=ou;
</script>
当前第{ds_CurrentRowNumber}页 总{ds_RowCount}页
</p>

</body>
</html>

pager2.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
   ul{margin:0px;text-align:left;}
   .border{
       border:2px solid #666666;
       padding:5px;
   }
   .aOdd{
   background-color:#FFCC99;
   }
   .aHover{
   background-color:#33CCFF;
   }
   .aSelected{
   background-color:#CCCCCC;
   }
</style>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryPagedView.js" type="text/javascript"></script>

<script type="text/javascript">
var ds1 = new Spry.Data.XMLDataSet("DataSource2.xml", "Messages/message");
var pv1 = new Spry.Data.PagedView(ds1,{pageSize:12, forceFullPages:false, useZeroBasedIndexes:false});
var pvInfo = pv1.getPagingInfo();
</script>

</head>
<body>

<div class="border">
<ul spry:region="pv1" spry:repeatchildren="pv1">
  <li spry:odd="aOdd" spry:hover="aHover" spry:select="aSelected"><a href="{url}">{title}</a></li>
</ul>
</div>

<p spry:region="pvInfo" spry:repeatchildren="pvInfo">
   <a spry:if="{ds_CurrentRowNumber} != {ds_RowNumber}" href="#" onclick="pv1.goToPage('{ds_PageNumber}')">{ds_PageNumber}</a>
   <span spry:if="{ds_CurrentRowNumber} == {ds_RowNumber}" class="currentPage">{ds_PageNumber}</span>
</p>
</body>
</html>