桦山涧

桦山涧
Asp.net ---->知识改变命运!
posts - 261, comments - 171, trackbacks - 6, articles - 3
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Spry框架实现XML分页[原]

Posted on 2008-08-19 16:02 桦林 阅读(...) 评论(...) 编辑 收藏

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><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>
<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"><href="{url}">{title}</a></li>
</ul>
</div>

<spry:region="pvInfo" spry:repeatchildren="pvInfo">
   
<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>