zoukankan      html  css  js  c++  java
  • 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><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>
  • 相关阅读:
    < java.util >-- Set接口
    Codeforces 627 A. XOR Equation (数学)
    Codeforces 161 B. Discounts (贪心)
    Codeforces 161 D. Distance in Tree (树dp)
    HDU 5534 Partial Tree (完全背包变形)
    HDU 5927 Auxiliary Set (dfs)
    Codeforces 27E. Number With The Given Amount Of Divisors (暴力)
    lght oj 1257
    Codeforces 219D. Choosing Capital for Treeland (树dp)
    Codeforces 479E. Riding in a Lift (dp + 前缀和优化)
  • 原文地址:https://www.cnblogs.com/huashanlin/p/1271343.html
Copyright © 2011-2022 走看看