中文XML论坛 - 专业的XML技术讨论区--显示贴子

以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 XML基础』  (http://bbs.xml.org.cn/list.asp?boardid=1)
----  用数据岛生成翻页程序(有助于理解数据岛的含义)!  (http://bbs.xml.org.cn/dispbbs.asp?boardid=1&rootid=&id=6608)

--  作者：diegor
--  发布时间：4/9/2004 4:32:00 PM

--  用数据岛生成翻页程序(有助于理解数据岛的含义)!
<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>

<XML ID="head">
<xmldata>
  <username width="150" sortBy="username" sortType="text">用户名</username>
  <pw width="150" sortBy="pw" sortType="number">密码</pw>
  <date width="200" sortBy="date" sortType="date">日期</date>
</xmldata>
</XML>

<XML ID="data">
<xmldata>
<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>
</xmldata>
</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 xmlDoc=document.all("data").XMLDocument;
var xmlDocTemp=new ActiveXObject("MSXML.DOMDocument");
xmlDocTemp.appendChild(xmlDoc.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();
    addHead();
    buildArr=new Array();
    if(totalrow%pagerow==0){
      for(var i=1;i<=pagerow;i++)
         buildArr[i-1]=totalrow-pagerow+i;
    }else{
      for(var i=1;i<=totalrow%pagerow;i++)
         buildArr[i-1]=totalrow-totalrow%pagerow+i;
    }
    addAll();
    currPage=totalpage;
  }
  changeMyDiv();
}
//删除objform下面的所有内容
function del()
{
objform.removeNode(true);
objform=document.createElement("<FORM name='fjcl'>");
objtable=document.createElement("<TABLE bordercolor='#1EC600' border='1'>");
objtbody=document.createElement("TBODY");
objtable.appendChild(objtbody);
}
//改变颜色
function changeColor()
{
for(var i=0;i<objtbody.childNodes.length-1;i++)
{
   var theRow=buildArr[i]-1;
   if(checkArr[theRow]==0)
   {
     objtbody.childNodes.item(i+1).className="first";
   }
   else
   {
     objtbody.childNodes.item(i+1).className="later";
   }
}
changeMyDiv();
}
function changeMyDiv()
{
var totalChecked=0;//记录当前选中记录数
for(var i=0;i<totalrow;i++)
{
   if(checkArr[i]==1) totalChecked+=1;
}
mydiv.innerText="一共"+totalpage+"页"+totalrow+"条记录,当前为第"+currPage+"页,当前选中"+totalChecked+"条记录";
}

  var myxm=xm.value;
  var temp=datanodes.item(nodeNo).getElementsByTagName("username");
  if(temp.item(0).text.indexOf(myxm)!=-1) return true;
  return false;

}
</script>

--  作者：小鞋子
--  发布时间：4/10/2004 9:02:00 AM

--
哎呀..天書啊.看了頭暈...

虐待別人的客戶端啊.....

--  作者：faly
--  发布时间：4/10/2004 12:57:00 PM

--
强哦^

--  作者：lipo
--  发布时间：4/10/2004 2:48:00 PM

--
好像出错了
可是我没看懂哪错了
编译不成功!

--  作者：hasiz
--  发布时间：8/19/2005 9:01:00 PM

--
多谢楼主，我的一个数据岛问题都是一天了，看了你的帖子后，解决了！

--  作者：matida
--  发布时间：11/14/2005 1:50:00 PM

--
什么是数据岛?迷茫了

--  作者：155120699
--  发布时间：3/27/2006 11:18:00 AM

--
这么长的代码.....看得头晕....我刚接触xml啊

W 3 C h i n a ( since 2003 ) 旗下站点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》

139.648ms