百度空间 | 百度首页 
 
查看文章
 
dhtml中datasrc的使用
2008-05-30 09:54
dataSrc:设置或获取用于数据绑定的数据源。
格式:<ELEMENT dataSrc="sID"> (HTML中)
      objectid.dataSrc[=sId]    (javascript中)

dataFld:设置或获取由dataSrc属性指定的绑定到指定对象的给定数据源的字段。
格式:<ELEMENT dataFld="sField"> (HTML中)
      objectid.dataFld[=sField]    (javascript中)
----------------------------------------------------------------------------------------
dataPageSize:设置或获取绑定到数据源的表格中显示的记录数。如果不设置此参数,则显示全部
格式:<TABLE DATAPAGESIZE=iSize> (HTML中)
      tableid.dataPageSize[=iSize] (javascript中)

firstPage:显示首页
格式:tableid.firstPage()

lastPage:显示末页
格式:tableid.lastPage()

previousPage:显示上页
格式:tableid.previousPage()

nextPage:显示末页
格式:tableid.nextPage()
----------------------------------------------------------------------------------------
absoluteposition:获取记录指针在记录集中的当前位置
格式:objectid.recordset.absoluteposition

recordcount:获取记录集中记录总数
格式:objectid.recordset.recordcount

movefirst:记录指针移至记录集头部
格式:objectid.recordset.movefirst()

movelast:记录指针移至记录集尾部
格式:objectid.recordset.movelast()

moveprevious:记录指针前移
格式:objectid.recordset.moveprevious()

movenext:记录指针后移
格式:objectid.recordset.movenext()

用这些方法可以将内部xml或外部xml文件的数据显示在页面中,

<html>
<head>
<script>
function init(){//初始化页面中的总页数
var totPage=document.getElementById('total');
totPage.innerText=data.recordset.recordcount;
}

function page(databox,datasrc,moveto){
/***********************************************************************************
函数参数:
databox为容器的id,即此例中id为oTab的table
datasrc为数据源id,即此例中的data
moveto为翻页方式:firstPage(首页)|previousPage(上页)|nextPage(下页)|lastPage(末页)
***********************************************************************************/
var curPage=document.getElementById('current');
switch (moveto){
case 'firstPage':databox.firstPage();
        datasrc.recordset.movefirst();
   break;
case 'lastPage':databox.lastPage();
        datasrc.recordset.movelast();
   break;
case 'previousPage':if(datasrc.recordset.absoluteposition>1){
        databox.previousPage();
        datasrc.recordset.moveprevious();}
    break;
case 'nextPage':if(datasrc.recordset.absoluteposition<datasrc.recordset.recordcount){
       databox.nextPage();
       datasrc.recordset.movenext();}
   break;
}
curPage.innerText=datasrc.recordset.absoluteposition;//显示当前页数
}
</script>
</head>

<body onload="init();">
<!--内部数据源实例-->
<!-- 如内容较多时可单独存放在data.xml文件中,然后用<xml src="data.xml"></xml>导入 -->
<xml id="data">
<root>
<article>
<title>第一页</title>
<content>1111111111111111</content>
</article>
<article>
<title>第二页</title>
<content>2222222222222222</content>
</article>
<article>
<title>第三页</title>
<content>3333333333333333</content>
</article>
<article>
<title>第四页</title>
<content>4444444444444444</content>
</article>
<article>
<title>第五页</title>
<content>4444444444444444</content>
</article>
</root>
</xml>
<table datasrc="#data" dataPageSize="1" id="oTab" border="1">
<tr><td>title:</td><td><span datafld="title"/></td></tr>
<tr><td>content:</td><td valign="top"><div datafld="content" ></div></td></tr>
</table>
<div>
<input type="button" value="首 页" onclick="page(oTab,data,'firstPage');">
<input type="button" value="上 页" onclick="page(oTab,data,'previousPage');">
<input type="button" value="下 页" onclick="page(oTab,data,'nextPage');">
<input type="button" value="末 页" onclick="page(oTab,data,'lastPage');"><br>
第 <span id="current">1</span> 页 | 共 <span id="total"></span>&nbsp;&nbsp;页
</div>
</body>
</html>


类别:Dhtml | 添加到搜藏 | 浏览() | 评论 (0)
 
最近读者:
 
网友评论:
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
验证码: 请点击后输入四位验证码,字母不区分大小写
      

     

©2009 Baidu