<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">
<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" 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+"條記錄";
}
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);
<!--
// 此處添加你要的操作
-->
}
</script>
<script>
//以下實現對不同數據類型進行排序
//比較兩個字符串
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;
}
</script>
<script>
//點擊排序按鈕時執行此函數
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.innerText="一共"+totalpage+"頁"+totalrow+"條記錄,當前為第1頁,當前選中0條記錄";
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;
}
</script>
posted on 2005-06-10 14:42
楚客 閱讀(153)
評論(0) 編輯 收藏 所屬分類:
HTML