WEB开发网
开发学院网页设计JavaScript 用数据岛生成翻页程序 阅读

用数据岛生成翻页程序

　2007-11-27 17:40:29　来源：WEB开发网　　　
核心提示：<!--张凤民--><html><head><title>Tree walk test - JScript</title><style>body { font-family: 宋体; font-size: 9pt }.first

<!--张凤民-->

<html>

<head>
<title>Tree walk test - JScript</title>
<style>body　　　　 { font-family: 宋体; font-size: 9pt }
.first　　　 { color: gray; text-decoration: none }
.later　　　 { cursor: hand; color: red; text-decoration: none }
</style>
<meta name=GENERATOR content=Microsoft FrontPage 4.0>
<meta name=ProgId content=FrontPage.Editor.Document>
</head>

<!--
配置说明:width控制当前列的宽度;sortBy排序指向下面的data的tagname;sortType为排序类型,目前支持三种:text,date,number,
也可实现自己的类型,只要修改sort函数就可了
-->
<xml(标准化越来越近了) ID=head>
<xml(标准化越来越近了)data>
  <username width=150 sortBy=username sortType=text>用户名</username>
  <pw width=150 sortBy=pw sortType=number>密码</pw>
  <date width=200 sortBy=date sortType=date>日期</date>
</xml(标准化越来越近了)data>
</xml(标准化越来越近了)>
<!--
配置说明:isShow,控制此处内容是否显示;isKey是否是主键,1是且内容会在theValue里面显示,0否;
-->
<xml(标准化越来越近了) ID=data>
<xml(标准化越来越近了)data>
<row>
  <id isShow=0 isKey=1>1</id>
  <username isShow=1 isKey=1>fmzhang1</username>
  <pw　　　 isShow=1 isKey=1>1</pw>
  <date　　 isShow=1 isKey=0>2003-3-3</date>
</row>
<row>
  <id isShow=0 isKey=1>2</id>
  <username isShow=1 isKey=1>fmzhang11</username>
  <pw　　　 isShow=1 isKey=1>1</pw>
  <date　　 isShow=1 isKey=0>2003-3-3</date>
</row>
<row>
  <id isShow=0 isKey=1>3</id>
  <username isShow=1 isKey=1>fmzhang2</username>
  <pw　　　 isShow=1 isKey=1>2</pw>
  <date　　 isShow=1 isKey=0>2003-3-7</date>
</row>
<row>
  <id isShow=0 isKey=1>4</id>
  <username isShow=1 isKey=1>fmzhang3</username>
  <pw　　　 isShow=1 isKey=1>3</pw>
  <date　　 isShow=1 isKey=0>2003-5-3</date>
</row>
<row>
  <id isShow=0 isKey=1>5</id>
  <username isShow=1 isKey=1>fmzhang4</username>
  <pw　　　 isShow=1 isKey=1>4</pw>
  <date　　 isShow=1 isKey=0>2002-3-3</date>
</row>
<row>
  <id isShow=0 isKey=1>6</id>
  <username isShow=1 isKey=1>fmzhang5</username>
  <pw　　　 isShow=1 isKey=1>5</pw>
  <date　　 isShow=1 isKey=0>2003-1-3</date>
</row>
<row>
  <id isShow=0 isKey=1>7</id>
  <username isShow=1 isKey=1>fmzhang6</username>
  <pw　　　 isShow=1 isKey=1>6</pw>
  <date　　 isShow=1 isKey=0>2005-1-3</date>
</row>
<row>
  <id isShow=0 isKey=1>8</id>
  <username isShow=1 isKey=1>fmzhang7</username>
  <pw　　　 isShow=1 isKey=1>7</pw>
  <date　　 isShow=1 isKey=0>2003-5-3</date>
</row>
<row>
  <id isShow=0 isKey=1>9</id>
  <username isShow=1 isKey=1>fmzhang8</username>
  <pw　　　 isShow=1 isKey=1>8</pw>
  <date　　 isShow=1 isKey=0>2003-1-8</date>
</row>
<row>
  <id isShow=0 isKey=1>10</id>
  <username isShow=1 isKey=1>fmzhang9</username>
  <pw　　　 isShow=1 isKey=1>9</pw>
  <date　　 isShow=1 isKey=0>2003-11-3</date>
</row>
</xml(标准化越来越近了)data>
</xml(标准化越来越近了)>
<body id=objbody onload=show(first)>

<div id=mydiv>
</div>
<table border=0 cellpadding=2 width=57%>
  <tr>
　  <td width=13%><input type=button value=首页 onclick=show(first)></td>
　  <td width=14%><input type=button value=上一页 onclick=show(prov)></td>
　  <td width=35%><input type=button value=下一页 onclick=show(next)></td>
　  <td width=14%><input type=button value=最后一页 onclick=show(last)></td>
　  <td width=40%><input type=text size=5 maxlength=5 name=pageNum value onkeydown=if(event.keyCode==13) goPageNum() onkeyup=value=value.replace(/[^\d]/g,) onblur=value=value.replace(/[^\d]/g,) onbeforepaste=clipboardData.setData(text,clipboardData.getData(text).replace(/[^\d]/g,))><input type=button value=go onclick=goPageNum()></td>
  </tr>
  <tr>
　  <td width=13%>用户名</td>
　  <td width=14%><input type=text name=xm size=10 value></td>
　  <td width=35% nowrap onclick=if(isResult.checked==true) isResult.checked=false;else if(isResult.checked==false) isResult.checked=true><input type=checkbox name=isResult onclick=if(this.checked==true) this.checked=false;else this.checked=true; value=ON>在当前结果中查找</td>
　  <td width=54% colspan=2><input type=button name=search onclick=search() value=查找 size=10></td>
  </tr>
</table>
<table border=0 cellpadding=2 width=100%>
</table>
　　
<table id=tableSec>
  <tr>
　  <td>
　　  <!--
　　　 添加自己的按钮
　  -->
　　  <input type=button value=此处添加自定义按钮 onclick=yourFunction()></td>
  </tr>
</table>

</body>

</html>
<script>
//下面为初始化参数
 var datanodes=data.documentElement.childNodes;
 //下面三行保存副本,供删除以后恢复
 var xml(标准化越来越近了)Doc=document.all(data).xml(标准化越来越近了)Document;
 var xml(标准化越来越近了)DocTemp=new ActiveXObject(MSxml(标准化越来越近了).DOMDocument);
 xml(标准化越来越近了)DocTemp.appendChild(xml(标准化越来越近了)Doc.documentElement.cloneNode(true));
 
 var totalrow=datanodes.length;//总数据行数
 var pagerow=4;//每页行数
 var totalpage=0;//总页数
 if(totalrow!=0) {
　 if(totalrow%pagerow!=0) totalpage=parseInt(totalrow/pagerow)+1;
　 else totalpage=parseInt(totalrow/pagerow);
 }
 var currPage=1;//当前页码
 var checkArr=new Array();//是否选中
 var theValueArr=new Array();//记录选中记录的checkbox的value值
 for(var i=0;i<totalrow;i++)
 {
　 checkArr[i]=0;//记录选中的记录0为未选中,1为选中,初始为0
　 theValueArr[i]=;
 }
 var buildArr=new Array();//保存当前页要生成的记录序号
 var sortOrder=asce;//保存升序还是降序
 
 mydiv.innerText=一共+totalpage+页+totalrow+条记录,当前为第1页,当前选中0条记录;
 var nodes=head.documentElement.childNodes;
 var nodeslen=nodes.length;
 var attributes=head.documentElement.firstChild.attributes;
 var objform=document.createElement(<FORM name=fjcl>);
 var objtable=document.createElement(<TABLE bordercolor=#1EC600 border=1>);
 var objtbody=document.createElement(TBODY);
 objtable.appendChild(objtbody);
</script>
<script language=javascript>
//生成表格头部
function addHead()
{
 var objtr=document.createElement(<TR  bgColor=#FFCCCC>);
 objtbody.appendChild(objtr);
 var objtd=document.createElement(TD);
 objtd.width=20;
 objtd.innerText= ;
 objtr.appendChild(objtd);
 for(var i=0;i<nodeslen;i++)
 {
　 var objtd=document.createElement(<TD onclick= onmousemove=>);
　 objtd.width=head.documentElement.childNodes.item(i).getAttribute(width);
　 objtd.onmousemove=style.cursor=hand;
　 var sortBy=head.documentElement.childNodes.item(i).getAttribute(sortBy);
　 var sortType=head.documentElement.childNodes.item(i).getAttribute(sortType);
　 objtd.onclick=sort(+sortBy+,+sortType+,+i+);
　 var tdtext=nodes.item(i).text+→;
　 var objtext=document.createTextNode(tdtext);
　 objtd.appendChild(objtext);
　 objtr.appendChild(objtd);
 }
 objform.appendChild(objtable);
 objbody.appendChild(objform);
 objbody.appendChild(tableSec);
}
//添加符合条件的记录
function addAll()
{
  var childdatanodes=data.documentElement.childNodes.item(0).childNodes;
  var childtotalrow=childdatanodes.length;//每行下面可能的数据项长度
  for(var i=0;i<buildArr.length;i++)
  {
　 
　  var objtr;
　  if(i%2==0)
　  {
　　　 objtr=document.createElement(<TR onmouseover= bgColor=#80FF80  class=first onclick=changeColor() >);
　  }else
　  {
　　　 objtr=document.createElement(<TR onmouseover= bgColor=#FFFF80  class=first onclick=changeColor() >);
　  }
　  if(checkArr[buildArr[i]-1]==1) objtr.className=later;
　  objtr.onmouseover=style.cursor=hand;
　  var thetd=document.createElement(TD);
　  var objCheckBox;
　  if(checkArr[buildArr[i]-1]==0)
　  {
　　  objCheckBox=document.createElement(<input type=CHECKBOX name=rad value= onclick=>);
　  }else
　  {
　　  objCheckBox=document.createElement(<input type=CHECKBOX name=rad value= onclick= checked>);
　  }
　 
　  objCheckBox.onclick=objCheckBox.onclick+;if(this.checked==true) checkArr[+parseInt(buildArr[i]-1)+]=1;else checkArr[+parseInt(buildArr[i]-1)+]=0;
　  thetd.appendChild(objCheckBox);
　  objtr.appendChild(thetd);
　  for(var j=0;j<childtotalrow;j++)
　  {
　　  var isShow=datanodes.item(buildArr[i]-1).childNodes.item(j).getAttribute(isShow);//是否显示
　　  var isKey=datanodes.item(buildArr[i]-1).childNodes.item(j).getAttribute(isKey);  //是否是主键
　　  if(isShow==1)//isShow=1
　　  {
　　　　 var objtd=document.createElement(<TD onclick=>);
　　　　 var tdtext=document.createTextNode(datanodes.item(buildArr[i]-1).childNodes.item(j).text);
　　　　 objtd.appendChild(tdtext);
　　　　 objtr.appendChild(objtd);
　　　　
　　　　  objtd.onclick=objCheckBox.click;
　　  }
　　  if(isKey==1)
　　  {
　　　　 if(objCheckBox.value==)
　　　　　　 objCheckBox.value=objCheckBox.value+datanodes.item(buildArr[i]-1).childNodes.item(j).tagName+=+datanodes.item(buildArr[i]-1).childNodes.item(j).text;
　　　　 else
　　　　　　 objCheckBox.value=objCheckBox.value+&+datanodes.item(buildArr[i]-1).childNodes.item(j).tagName+=+datanodes.item(buildArr[i]-1).childNodes.item(j).text;
　　  }
　  }
　  theValueArr[buildArr[i]-1]=objCheckBox.value;
　  objtbody.appendChild(objtr);
  }
  objform.appendChild(objtable);
  objbody.appendChild(objform);
  objbody.appendChild(tableSec);
}
//翻页按钮操作
function show(thePage)
{
  if(totalrow==0)
  {
　 del();
　 addHead();
　 return false;
　 }
  if(thePage==first)
  {
　  del();
　  addHead();
　　 buildArr=new Array();
　  if(totalrow>=pagerow){
　　　 for(var i=1;i<=pagerow;i++)
　　　　  buildArr[i-1]=i;
　  }else{
　　　 for(var i=1;i<=totalrow;i++)
　　　　  buildArr[i-1]=i;
　  }
　  addAll();
　  currPage=1;
  }else if(thePage==prov)
  {
　  if(currPage==1) return false;
　  del();
　  addHead();
　  buildArr=new Array();
　  for(var i=1;i<=pagerow;i++){
　　  buildArr[i-1]=(currPage-2)*pagerow+i;
　  }
　  addAll();
　  currPage=currPage-1;
  }else if(thePage==next)
  {
　  if(currPage==totalpage) return false;
　  del();
　  addHead();
　  buildArr=new Array();
　  if((currPage+1)*pagerow>=totalrow){
　　　 for(var i=1;i<=totalrow-currPage*pagerow;i++)
　　　　  buildArr[i-1]=currPage*pagerow+i;
　  }else {
　　  for(var i=1;i<=pagerow;i++)
　　　　  buildArr[i-1]=currPage*pagerow+i;
　  }
　　 addAll();
　  currPage=currPage+1;
  }else if(thePage==last)
  {
　  if(currPage==totalpage) return false;
　  del();
　

Tags：数据 生成 程序

编辑录入：coldstar　[复制链接] [打 印]
更多精彩
赞助商链接

热点阅读
焦点图片
最新推荐
精彩阅读