<html> <head> <title>Tree walk test - JScript</title> <mce:style><!-- body { font-family: 宋体; font-size: 9pt } table{border-collapse: collapse;width:600px;font:normal 12px Tahoma;background:#EEEEEE} button{border:1px solid #666666;background:#EEEEEE} .first { color: gray; text-decoration: none } .later { cursor: hand; color: red; text-decoration: none } --></mce:style><style mce_bogus="1"> body { font-family: 宋体; font-size: 9pt } table{border-collapse: collapse;width:600px;font:normal 12px Tahoma;background:#EEEEEE} button{border:1px solid #666666;background:#EEEEEE} .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"> <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> <!-- 配置说明:isShow,控制此处内容是否显示;isKey是否是主键,1是且内容会在thevalue里面显示,0否; --> <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" οnlοad="show('first')"> <div id="mydiv"> </div> <table border="0" cellpadding="2" width="57%"> <tr> <td width="15%">用户名</td> <td width="35%"><input type="text" name="xm" size="10" value></td> <td width="35%" nowrap οnclick="if(isResult.checked==true) isResult.checked=false;else if(isResult.checked==false) isResult.checked=true"><input type="checkbox" name="isResult" οnclick="if(this.checked==true) this.checked=false;else this.checked=true;" value="ON">在当前结果中查找</td> <td width="15%" colspan="2"><input type="button" name="search" οnclick="search()" value="查找" size="10"></td> </tr> </table> <table border="0" cellpadding="2" width="100%"> </table> <table id="tableSec"> <tr> <td> <center> <input type="button" value="首页" οnclick="show('first')"> <input type="button" value="上一页" οnclick="show('prov')"> <input type="button" value="下一页" οnclick="show('next')"> <input type="button" value="最后一页" οnclick="show('last')"> <input type="text" size="5" maxlength="5" name="pageNum" value οnkeydοwn="if(event.keyCode==13) goPageNum()" οnkeyup="value=value.replace(/[^/d]/g,'')" οnblur="value=value.replace(/[^/d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))"><input type="button" value="go" οnclick="goPageNum()"> </center> </td> <td> <!-- 添加自己的按钮 --> <input type="button" value="此处添加自定义按钮" οnclick="yourFunction()"> </td> </tr> </table> </body> </html> <mce:script type="text/javascript"><!-- //下面为初始化参数 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); // --></mce:script> <mce:script language="javascript"><!-- //生成表格头部 function addHead() { var objtr=document.createElement("<TR bgColor='#cccccc'>"); 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 οnclick='' οnmοusemοve=''>"); objtd.width=head.documentElement.childNodes.item(i).getAttribute("width"); objtd.οnmοusemοve="style.cursor='hand'"; var sortBy=head.documentElement.childNodes.item(i).getAttribute("sortBy"); var sortType=head.documentElement.childNodes.item(i).getAttribute("sortType"); objtd.οnclick="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 οnmοuseοver='' bgColor='#eeeeee' class='first' οnclick='changeColor()' >"); }else { objtr=document.createElement("<TR οnmοuseοver='' bgColor='#eeeeee' class='first' οnclick='changeColor()' >"); } if(checkArr[buildArr[i]-1]==1) objtr.className="later"; objtr.οnmοuseοver="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='' οnclick=''>"); }else { objCheckBox=document.createElement("<input type='CHECKBOX' name='rad' value='' οnclick='' checked>"); } objCheckBox.οnclick=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 οnclick=''>"); var tdtext=document.createTextNode(datanodes.item(buildArr[i]-1).childNodes.item(j).text); objtd.appendChild(tdtext); objtr.appendChild(objtd); objtd.οnclick=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+"条记录"; } function showvalue() { var str=""; var str2=""; for(var i=0;i<totalrow;i++) { str+=checkArr[i]+";"; if(checkArr[i]==1) str2+=thevalueArr[i]+";"; } alert(str); alert(str2); } //跳转到某个页 function goPageNum() { var page=pageNum.value; if(totalrow==0) { alert("没有可操作的记录!"); return false; } if(page.length==0) { alert("请输入要跳转的页码!"); return false; } if(parseInt(page)==0||parseInt(page)>totalpage) { alert("输入页码应介于1和"+totalpage+"之间!"); return false; } if(page==currPage) return false; if(page==1) { show('first'); }else if(page==totalpage) { show('last'); }else { del(); addHead(); buildArr=new Array(); for(var i=0;i<pagerow;i++){ buildArr[i]=(page-1)*pagerow+i+1; } addAll(); currPage=page; } changeMyDiv(); } function yourFunction() { if(totalrow==0) { alert("没有可操作的记录!"); return false; } var totalChecked=0;//记录当前选中记录数 for(var i=0;i<totalrow;i++) { if(checkArr[i]==1) totalChecked+=1; } if(totalChecked==0) { alert("没有选中记录,请选择后进行操作!"); return false; } var pk=''; for(var i=0;i<totalrow;i++) { if(checkArr[i]==1) pk+=thevalueArr[i]+";"; } alert(pk); <!-- // 此处添加你要的操作 --> } // --></mce:script> <mce:script type="text/javascript"><!-- //以下实现对不同数据类型进行排序 //比较两个字符串 function compare_text(text1,text2) { if(text1>text2) return 1; else return 0; } //比较两个数字的大小(按浮点数) function compare_number(number1,number2) { if(parseFloat(number1)>parseFloat(number2)) return 1; else return 0; } //比较两个日期的大小 function compare_date(kssj,jssj) { var kssjArr=kssj.split("-"); var jssjArr=jssj.split("-"); var date1=new Date(kssjArr[0],kssjArr[1],kssjArr[2]); var date2=new Date(jssjArr[0],jssjArr[1],jssjArr[2]); if(date1>date2) return 1; else return 0; } // --></mce:script> <mce:script type="text/javascript"><!-- //点击排序按钮时执行此函数 function sort(sortBy,sortType,sortNum) { if(data.documentElement.childNodes.length==0) return false; var sortByArr=new Array(); for(var i=0;i<buildArr.length;i++){ sortByArr[i]=datanodes.item(buildArr[i]-1).getElementsByTagName(sortBy).item(0).text; } if(sortOrder=='asce') { //升序 for(var i=0;i<buildArr.length;i++){ for(var j=0;j<buildArr.length-1;j++){ var tempArr; var tempSort; if(sortType=='text'){ if(compare_text(sortByArr[j],sortByArr[j+1])==1){ tempArr=sortByArr[j];sortByArr[j]=sortByArr[j+1];sortByArr[j+1]=tempArr; tempSort=buildArr[j];buildArr[j]=buildArr[j+1];buildArr[j+1]=tempSort; } }else if(sortType=='number'){ if(compare_number(sortByArr[j],sortByArr[j+1])==1){ tempArr=sortByArr[j];sortByArr[j]=sortByArr[j+1];sortByArr[j+1]=tempArr; tempSort=buildArr[j];buildArr[j]=buildArr[j+1];buildArr[j+1]=tempSort; } }else if(sortType=='date'){ if(compare_date(sortByArr[j],sortByArr[j+1])==1){ tempArr=sortByArr[j];sortByArr[j]=sortByArr[j+1];sortByArr[j+1]=tempArr; tempSort=buildArr[j];buildArr[j]=buildArr[j+1];buildArr[j+1]=tempSort; } } } } sortOrder="desc"; } else if(sortOrder=='desc'){ //降序 for(var i=0;i<buildArr.length;i++){ for(var j=0;j<buildArr.length-1;j++){ var tempArr; var tempSort; if(sortType=='text'){ if(compare_text(sortByArr[j],sortByArr[j+1])==0){ tempArr=sortByArr[j];sortByArr[j]=sortByArr[j+1];sortByArr[j+1]=tempArr; tempSort=buildArr[j];buildArr[j]=buildArr[j+1];buildArr[j+1]=tempSort; } }else if(sortType=='number'){ if(compare_number(sortByArr[j],sortByArr[j+1])==0){ tempArr=sortByArr[j];sortByArr[j]=sortByArr[j+1];sortByArr[j+1]=tempArr; tempSort=buildArr[j];buildArr[j]=buildArr[j+1];buildArr[j+1]=tempSort; } }else if(sortType=='date'){ if(compare_date(sortByArr[j],sortByArr[j+1])==0){ tempArr=sortByArr[j];sortByArr[j]=sortByArr[j+1];sortByArr[j+1]=tempArr; tempSort=buildArr[j];buildArr[j]=buildArr[j+1];buildArr[j+1]=tempSort; } } } } sortOrder="asce"; } del(); addHead(); addAll(); if(sortOrder=="asce"){ objtable.rows[0].cells[parseInt(sortNum)+1].innerText=nodes.item(parseInt(sortNum)).text+"↓"; }else{ objtable.rows[0].cells[parseInt(sortNum)+1].innerText=nodes.item(parseInt(sortNum)).text+"↑"; } } //在原有结果中查找时也删除data的所有node,然后把xmlDocTemp的所有node复制到data里面 function delAllNode() { var len=datanodes.length; for(var i=0;i<len;i++) { datanodes.item(i).parentNode.removeChild(datanodes.item(i)); i-=1; len-=1; } } //此函数实现在结果中查找符合条件的记录 function search() { if(isResult.checked==false) { delAllNode(); var xmlDocTempLen=xmlDocTemp.documentElement.childNodes.length; for(var i=0;i<xmlDocTempLen;i++) { data.documentElement.appendChild(xmlDocTemp.documentElement.childNodes.item(i).cloneNode(true)); } datanodes=data.documentElement.childNodes; } var nodeLen=datanodes.length; for(var i=0;i<nodeLen;i++) { if(!isShow(i)) //不符合条件的删除 { datanodes.item(i).parentNode.removeChild(datanodes.item(i)); i-=1; nodeLen-=1; } } totalrow=datanodes.length;//总数据行数 totalpage=0;//总页数 if(totalrow!=0) { if(totalrow%pagerow!=0) totalpage=parseInt(totalrow/pagerow)+1; else totalpage=parseInt(totalrow/pagerow); } currPage=1;//当前页码 checkArr=new Array();//是否选中 thevalueArr=new Array();//记录选中记录的checkbox的value值 for(var i=0;i<totalrow;i++) { checkArr[i]=0;//记录选中的记录0为未选中,1为选中,初始为0 thevalueArr[i]=""; } buildArr=new Array();//保存当前页要生成的记录序号 sortOrder='asce';//保存升序还是降序 mydiv.innerHTML="<P style="FILTER: shadow(color=#000000,direction=110); HEIGHT: 16px" align=center><FONT color=#ffffff size=3>一共"+totalpage+"页"+totalrow+"条记录,当前为第1页,当前选中0条记录</FONT></P>"; show('first'); } //下面这个函数需要你自己实现,符合条件的记录(要显示)返回true,否则返回false function isShow(nodeNo) { var myxm=xm.value; var temp=datanodes.item(nodeNo).getElementsByTagName("username"); if(temp.item(0).text.indexOf(myxm)!=-1) return true; return false; } // --></mce:script>