关于客户端排序和表格头固定方法
2006-03-31 11:48
387 查看
数据直接在客户端页面上排序可以不需要重新访问数据库,而且速度很快。但是由于排序时候在客户端页面上进行,所以会随着数据量增加排序速度下降,因此客户端页面适合页面数据在1000行以下或者分页的场合。
排序原理:把页面数据按行为单位拼接,以字符串方式拼接在一起,利用数组自带方法排序,最后通过算法在页面上重新生成。(以下蓝色代码)
表格头固定问题。(以下红色代码)
举例说明:
页面:
要求:
点击tilte上各个按钮後,按实际要求排序
在客户端页面如下写:
<!--sort-->
<HTML>
<HEAD>
<title>Qualifying (DHTML Dude)</title>
</HEAD>
<style>
.fixedHeaderTr
{
z-index:10;
position:relative;
top:expression(this.offsetParent.scrollTop);
};
.mainDiv
{
overflow:auto;
scrollbar-face-color:C0C0C0;
height:expression((document.body.clientHeight-this.offsetTop-20>this.children[0].offsetHeight)?(this.children[0].offsetHeight+20) : (document.body.clientHeight-this.offsetTop-20));
width:expression(document.body.clientWidth-20);
}
</style>
<BODY>
<BR><CENTER>Canadian Grand Prix Qualifying</CENTER><BR>
<div class="mainDiv" id=mailContainerDiv>
<TABLE id=MyTable
style="behavior:url(tableAct.htc);
BORDER: black 0px solid;
WIDTH: 99%;
background-color:#eeeecc;"
borderColor=#999999
cellSpacing=0
cellPadding=1
border=1
dragcolor="gray"
slcolor=#ffffcc hlcolor=#BEC5DE >
<THEAD>
<TR align="center" class="fixedHeaderTr" style="background:#C0C0C0;">
<TD width=120>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
StartDate
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
<TD width=120>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
EndDate
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
<TD width=300>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Name
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
<TD width=50><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">Degrade</DIV></TD>
<TD width=80>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Class
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
<TD width=50><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">Kindof</DIV></TD>
<TD width=100>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Number
</DIV>
</BUTTON>
</DIV>
</DIV>
</TD>
<TD width=50><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">CD</DIV></TD>
<TD width=50><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">M</DIV></TD>
<TD width=80><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">Detail</DIV></TD>
</TR>
</THEAD>
<TBODY>
<tr>
<TD>2005-12-12</TD>
<TD>2006-01-12</TD>
<TD>Jordan</TD>
<TD>1</TD>
<TD>01</TD>
<TD>water</TD>
<TD>642,265</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button1
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2005-12-12</TD>
<TD>2006-01-12</TD>
<TD>Honda</TD>
<TD>2</TD>
<TD>02</TD>
<TD>water</TD>
<TD>642,376</TD>
<TD>3</TD>
<TD>Min</TD>
<TD><DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button2
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2004-10-12</TD>
<TD>2006-01-12</TD>
<TD>BAR</TD>
<TD>3</TD>
<TD>03</TD>
<TD>water</TD>
<TD>545,376</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt;
1088e
margin:0px; border:0px; ">
Button3
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2004-11-12</TD>
<TD>2006-01-12</TD>
<TD>Sauber</TD>
<TD>1</TD>
<TD>01</TD>
<TD>water</TD>
<TD>585,466</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button4
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2004-12-11</TD>
<TD>2006-01-12</TD>
<TD>Sauber</TD>
<TD>2</TD>
<TD>02</TD>
<TD>water</TD>
<TD>-585,466</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button5
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2004-12-13</TD>
<TD>2006-01-16</TD>
<TD>Jaguar</TD>
<TD>3</TD>
<TD>03</TD>
<TD>water</TD>
<TD>0.585466</TD>
<TD>3</TD>
<TD>Max</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button6
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2004-12-14</TD>
<TD>2006-01-17</TD>
<TD>Jaguar</TD>
<TD>1</TD>
<TD>04</TD>
<TD>water</TD>
<TD>585,466</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button7
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2004-12-21</TD>
<TD>2006-02-16</TD>
<TD>Lotus</TD>
<TD>2</TD>
<TD>05</TD>
<TD>water</TD>
<TD>-585,766</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button8
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2005-12-15</TD>
<TD>2006-03-16</TD>
<TD>Ferrari</TD>
<TD>3</TD>
<TD>06</TD>
<TD>water</TD>
<TD>5,854,660</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button9
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2005-12-15</TD>
<TD>2006-03-19</TD>
<TD>Ferrari</TD>
<TD>1</TD>
<TD>07</TD>
<TD>water</TD>
<TD>985,466</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button10
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2005-12-15</TD>
<TD>2006-03-23</TD>
<TD>Williams</TD>
<TD>2</TD>
<TD>08</TD>
<TD>water</TD>
<TD>585,666</TD>
<TD>3</TD>
<TD>Max</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button11
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2005-12-15</TD>
<TD>2006-12-16</TD>
<TD>Williams</TD>
<TD>3</TD>
<TD>09</TD>
<TD>wood</TD>
<TD>554,666</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button12
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2005-12-15</TD>
<TD>2006-12-16</TD>
<TD>Williams</TD>
<TD>1</TD>
<TD>01</TD>
<TD>wood</TD>
<TD>585,446</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button13
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2005-12-15</TD>
<TD>2006-12-15</TD>
<TD>Williams</TD>
<TD>2</TD>
<TD>09</TD>
<TD>wood</TD>
<TD>585,466</TD>
<TD>3</TD>
<TD>Max</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button14
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2005-12-15</TD>
<TD>2006-12-15</TD>
<TD>Williams</TD>
<TD>2</TD>
<TD>09</TD>
<TD>wood</TD>
<TD>585,466</TD>
<TD>3</TD>
<TD>Max</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button15
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr height="15">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</tr>
<tr height="15">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</tr>
<tr height="15">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</tr>
</TBODY>
</TABLE>
</div>
</BODY>
</HTML>
其中tableAct.htc是一个面向客户端的htc组件,用于排序
//---------------------------------------------------------------------
//sort
//
//---------------------------------------------------------------------
<public:event name="onrowselect" id=rowSelect />
<public:property name="hlColor" />
<public:property name="slColor" />
<public:property name='dragColor' />
<public:attach event="ondetach" onevent="cleanup()" />
<public:attach event=oncontentready onevent="init();" />
<script language=jscript>
var currRow = -1;
var selRow = -1;
if (element.tagName == 'TABLE')
{
element.attachEvent('onmouseover', onMouseOver);
element.attachEvent('onmouseout', onMouseOut);
element.attachEvent('onclick', onClick);
}
else
{
alert("Error: tableAct not attached to a table element");
}
//******************************************************
//cleanup
//******************************************************
function cleanup()
{
hilite(-1);
element.detachEvent('onmouseover', onMouseOver);
element.detachEvent('onmouseout', onMouseOut);
element.detachEvent('onclick', onClick);
}
//******************************************************
//onClick
//******************************************************
function onClick()
{
srcElem = window.event.srcElement;
//crawl up the tree to find the table row
while (srcElem.tagName != "TR" && srcElem.tagName != "TABLE")
srcElem = srcElem.parentElement;
if(srcElem.tagName != "TR") return;
if(srcElem.rowIndex == 0 ) return;
if (selRow != -1) selRow.runtimeStyle.backgroundColor = '';
srcElem.runtimeStyle.backgroundColor = slColor;
selRow = srcElem;
var oEvent = createEventObject();
oEvent.selected = selRow;
rowSelect.fire(oEvent);
}
//******************************************************
//onMouseOver
//******************************************************
function onMouseOver()
{
srcElem = window.event.srcElement;
//crawl up to find the row
while (srcElem.tagName != "TR" && srcElem.tagName != "TABLE")
srcElem = srcElem.parentElement;
if(srcElem.tagName != "TR") return;
if (srcElem.rowIndex > 0)
hilite(srcElem);
else
hilite(-1);
}
//******************************************************
//onMouseOut
//******************************************************
function onMouseOut()
{
// Make sure we catch exit from the table
hilite(-1, -1);
}
//******************************************************
//hilite
//******************************************************
function hilite(newRow)
{
if (hlColor != null )
{
if (currRow != -1 && currRow!=selRow)
{
currRow.runtimeStyle.backgroundColor = '';
}
if (newRow != -1 && newRow!=selRow)
{
newRow.runtimeStyle.backgroundColor = hlColor;
}
}
currRow = newRow;
}
//******************************************************
// sort
//
// global variables
//
//******************************************************
var tbody=null;
var theadrow=null;
var colCount = null;
var lastclick = -1; // stores the object of our last used object
var arrHitTest = new Array();
var bDragMode = false;
var objDragItem;
var arrHitTest = new Array();
var iArrayHit = false;
//******************************************************
//init
//******************************************************
function init() {
// get TBODY - take the first TBODY for the table to sort
tbody = element.tBodies(0);
if (!tbody) return;
//Get THEAD
var thead = element.tHead;
if (!thead) return;
theadrow = thead.children[0]; //Assume just one Head row
if (theadrow.tagName != "TR") return;
//theadrow.runtimeStyle.cursor = "hand";
colCount = theadrow.children.length;
var l, clickCell;
var cx=0;
var cy=0;
var c;
for (var i=0; i<colCount; i++)
{
clickCell = theadrow.children[i];
clickCell.selectIndex = i;
clickCell.attachEvent("onclick", doClick);
}
}
//******************************************************
//doClick
//******************************************************
function doClick(e)
{
var clickObject = e.srcElement;
var iFlg = null;
while (clickObject.tagName != "TD")
{
clickObject = clickObject.parentElement;
}
iFlg = 1;
var buttonflg;
buttonflg = ""
if (clickObject.selectIndex=="0") {
buttonflg="1";
} else if (clickObject.selectIndex=="1") {
buttonflg="2";
} else if (clickObject.selectIndex=="2") {
buttonflg="3";
} else if (clickObject.selectIndex=="4") {
buttonflg="4";
} else if (clickObject.selectIndex=="6") {
buttonflg="5";
}
if (buttonflg!="") {
insertionSort(tbody,tbody.rows.length-1,buttonflg);
}
}
//******************************************************
//formatNumtoStr
//******************************************************
function formatNumtoStr(Num){
var newNum
var i
var iCount
var iTemp
var iTempResult
var newNumResult
newNum = Num
for (i=0;i<=4;i++){
newNum = newNum.replace(" ","")
newNum = newNum.replace(" ","")
newNum = newNum.replace(",","")
}
newNumResult="-"
if (newNum.substr(0,1)=="-"){
for(i=1;i<=newNum.length-1;i++){
iTemp = newNum.substr(i,1)
if (iTemp=="0"){
iTempResult = "A"
}else{
iTempResult = 10-iTemp
}
newNumResult = newNumResult + iTempResult
}
newNum = newNumResult
}
if (newNum.length != 13){
iCount = 13-newNum.length
for (i=0;i<=iCount-1;i++){
newNum = "0" + newNum
}
}
return newNum
}
//******************************************************
//insertionSort
//******************************************************
function insertionSort(t,iRowEnd,buttonflg){
//var st = new Date();
var strArray;
var strResultArray;
var iMoveArray;
var intPointArray
var strCurrent;
var strInsert;
var strLast;
strArray = new Array();
strResultArray = new Array();
intPointArray = new Array();
for (i=0;i<=tbody.rows.length-1;i++){
//asp
if ((t.children[i].children[0].innerText == " " ) &&
(t.children[i].children[1].innerText == " " ) &&
(t.children[i].children[2].innerText == " " ) &&
(t.children[i].children[4].innerText == " " ) &&
(t.children[i].children[6].innerText == " ")){
break;
}
if( typeof(t.children[i]) != "undefined") {
if (buttonflg == "1"){
strArray.push(t.children[i].children[0].innerText
+ t.children[i].children[1].innerText
+ t.children[i].children[2].innerText
+ t.children[i].children[4].innerText
+ formatNumtoStr(t.children[i].children[6].innerText));
} else if (buttonflg == "2"){
strArray.push(t.children[i].children[1].innerText
+ t.children[i].children[0].innerText
+ t.children[i].children[2].innerText
+ t.children[i].children[4].innerText
+ formatNumtoStr(t.children[i].children[6].innerText));
} else if (buttonflg == "3"){
strArray.push(t.children[i].children[2].innerText
+ t.children[i].children[0].innerText
+ t.children[i].children[1].innerText
+ t.children[i].children[4].innerText
+ formatNumtoStr(t.children[i].children[6].innerText));
} else if (buttonflg == "4"){
strArray.push(t.children[i].children[4].innerText
+ t.children[i].children[0].innerText
+ t.children[i].children[1].innerText
+ t.children[i].children[2].innerText
+ formatNumtoStr(t.children[i].children[6].innerText));
} else {
strArray.push(formatNumtoStr(t.children[i].children[6].innerText)
+ t.children[i].children[0].innerText
+ t.children[i].children[1].innerText
+ t.children[i].children[2].innerText
+ t.children[i].children[4].innerText);;
}
strResultArray.push(strArray[i]);
} else {
strArray.push("");
strResultArray.push("");
}
intPointArray.push(0);
}
//数据sort
strResultArray.sort();
//移动行(核心算法)
for (i=0;i<=strResultArray.length-1;i++){
iMoveArray = new Array();
strCurrent = strResultArray[strArray.length-1-i];
if (strLast!=strCurrent){
for (j=0;j<=iRowEnd;j++){
strInsert = strArray[j];
if (strCurrent == strInsert){
iMoveArray.push(j + intPointArray[j]);
for (n=0;n<=j-1;n++){
intPointArray
= intPointArray
+ 1;
}
}
}
for(m=0;m<=iMoveArray.length-1;m++){
eRowInsert = t.children[iMoveArray[m]];
eRowWalk = t.children[0];
t.insertBefore(eRowInsert, eRowWalk);
}
strLast = strCurrent;
}
}
}
</script>
注意:其中formatNumtoStr函数是针对数字类型,而且假设是带逗号的13位数字类型。
结果:
结果:
排序原理:把页面数据按行为单位拼接,以字符串方式拼接在一起,利用数组自带方法排序,最后通过算法在页面上重新生成。(以下蓝色代码)
表格头固定问题。(以下红色代码)
举例说明:
页面:
要求:
点击tilte上各个按钮後,按实际要求排序
在客户端页面如下写:
<!--sort-->
<HTML>
<HEAD>
<title>Qualifying (DHTML Dude)</title>
</HEAD>
<style>
.fixedHeaderTr
{
z-index:10;
position:relative;
top:expression(this.offsetParent.scrollTop);
};
.mainDiv
{
overflow:auto;
scrollbar-face-color:C0C0C0;
height:expression((document.body.clientHeight-this.offsetTop-20>this.children[0].offsetHeight)?(this.children[0].offsetHeight+20) : (document.body.clientHeight-this.offsetTop-20));
width:expression(document.body.clientWidth-20);
}
</style>
<BODY>
<BR><CENTER>Canadian Grand Prix Qualifying</CENTER><BR>
<div class="mainDiv" id=mailContainerDiv>
<TABLE id=MyTable
style="behavior:url(tableAct.htc);
BORDER: black 0px solid;
WIDTH: 99%;
background-color:#eeeecc;"
borderColor=#999999
cellSpacing=0
cellPadding=1
border=1
dragcolor="gray"
slcolor=#ffffcc hlcolor=#BEC5DE >
<THEAD>
<TR align="center" class="fixedHeaderTr" style="background:#C0C0C0;">
<TD width=120>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
StartDate
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
<TD width=120>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
EndDate
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
<TD width=300>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Name
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
<TD width=50><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">Degrade</DIV></TD>
<TD width=80>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Class
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
<TD width=50><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">Kindof</DIV></TD>
<TD width=100>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Number
</DIV>
</BUTTON>
</DIV>
</DIV>
</TD>
<TD width=50><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">CD</DIV></TD>
<TD width=50><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">M</DIV></TD>
<TD width=80><DIV style="text-align:center; vertical-align:top; font:12pt/1.2; margin:0px; border:0px;">Detail</DIV></TD>
</TR>
</THEAD>
<TBODY>
<tr>
<TD>2005-12-12</TD>
<TD>2006-01-12</TD>
<TD>Jordan</TD>
<TD>1</TD>
<TD>01</TD>
<TD>water</TD>
<TD>642,265</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button1
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2005-12-12</TD>
<TD>2006-01-12</TD>
<TD>Honda</TD>
<TD>2</TD>
<TD>02</TD>
<TD>water</TD>
<TD>642,376</TD>
<TD>3</TD>
<TD>Min</TD>
<TD><DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button2
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2004-10-12</TD>
<TD>2006-01-12</TD>
<TD>BAR</TD>
<TD>3</TD>
<TD>03</TD>
<TD>water</TD>
<TD>545,376</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt;
1088e
margin:0px; border:0px; ">
Button3
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2004-11-12</TD>
<TD>2006-01-12</TD>
<TD>Sauber</TD>
<TD>1</TD>
<TD>01</TD>
<TD>water</TD>
<TD>585,466</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button4
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2004-12-11</TD>
<TD>2006-01-12</TD>
<TD>Sauber</TD>
<TD>2</TD>
<TD>02</TD>
<TD>water</TD>
<TD>-585,466</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button5
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2004-12-13</TD>
<TD>2006-01-16</TD>
<TD>Jaguar</TD>
<TD>3</TD>
<TD>03</TD>
<TD>water</TD>
<TD>0.585466</TD>
<TD>3</TD>
<TD>Max</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button6
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2004-12-14</TD>
<TD>2006-01-17</TD>
<TD>Jaguar</TD>
<TD>1</TD>
<TD>04</TD>
<TD>water</TD>
<TD>585,466</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button7
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2004-12-21</TD>
<TD>2006-02-16</TD>
<TD>Lotus</TD>
<TD>2</TD>
<TD>05</TD>
<TD>water</TD>
<TD>-585,766</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button8
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2005-12-15</TD>
<TD>2006-03-16</TD>
<TD>Ferrari</TD>
<TD>3</TD>
<TD>06</TD>
<TD>water</TD>
<TD>5,854,660</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button9
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2005-12-15</TD>
<TD>2006-03-19</TD>
<TD>Ferrari</TD>
<TD>1</TD>
<TD>07</TD>
<TD>water</TD>
<TD>985,466</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button10
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2005-12-15</TD>
<TD>2006-03-23</TD>
<TD>Williams</TD>
<TD>2</TD>
<TD>08</TD>
<TD>water</TD>
<TD>585,666</TD>
<TD>3</TD>
<TD>Max</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button11
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2005-12-15</TD>
<TD>2006-12-16</TD>
<TD>Williams</TD>
<TD>3</TD>
<TD>09</TD>
<TD>wood</TD>
<TD>554,666</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button12
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2005-12-15</TD>
<TD>2006-12-16</TD>
<TD>Williams</TD>
<TD>1</TD>
<TD>01</TD>
<TD>wood</TD>
<TD>585,446</TD>
<TD>3</TD>
<TD>Min</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button13
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2005-12-15</TD>
<TD>2006-12-15</TD>
<TD>Williams</TD>
<TD>2</TD>
<TD>09</TD>
<TD>wood</TD>
<TD>585,466</TD>
<TD>3</TD>
<TD>Max</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button14
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr>
<TD>2005-12-15</TD>
<TD>2006-12-15</TD>
<TD>Williams</TD>
<TD>2</TD>
<TD>09</TD>
<TD>wood</TD>
<TD>585,466</TD>
<TD>3</TD>
<TD>Max</TD>
<TD>
<DIV style="border-width:1px; border-color:#000000; border-style:solid;">
<DIV style="margin:0px; padding:0px;
border-width:2px; border-color:#ffffff #828282 #828282 #ffffff ; border-style:solid;">
<BUTTON type="button" style="width:100%; cursor:hand; padding:0px; margin:0px; border:0px;" >
<DIV style="text-align:center; width:100%; height:100%; font:12pt; margin:0px; border:0px; ">
Button15
</DIV>
</BUTTON>
</DIV>
</DIV></TD>
</tr>
<tr height="15">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</tr>
<tr height="15">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</tr>
<tr height="15">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</tr>
</TBODY>
</TABLE>
</div>
</BODY>
</HTML>
其中tableAct.htc是一个面向客户端的htc组件,用于排序
//---------------------------------------------------------------------
//sort
//
//---------------------------------------------------------------------
<public:event name="onrowselect" id=rowSelect />
<public:property name="hlColor" />
<public:property name="slColor" />
<public:property name='dragColor' />
<public:attach event="ondetach" onevent="cleanup()" />
<public:attach event=oncontentready onevent="init();" />
<script language=jscript>
var currRow = -1;
var selRow = -1;
if (element.tagName == 'TABLE')
{
element.attachEvent('onmouseover', onMouseOver);
element.attachEvent('onmouseout', onMouseOut);
element.attachEvent('onclick', onClick);
}
else
{
alert("Error: tableAct not attached to a table element");
}
//******************************************************
//cleanup
//******************************************************
function cleanup()
{
hilite(-1);
element.detachEvent('onmouseover', onMouseOver);
element.detachEvent('onmouseout', onMouseOut);
element.detachEvent('onclick', onClick);
}
//******************************************************
//onClick
//******************************************************
function onClick()
{
srcElem = window.event.srcElement;
//crawl up the tree to find the table row
while (srcElem.tagName != "TR" && srcElem.tagName != "TABLE")
srcElem = srcElem.parentElement;
if(srcElem.tagName != "TR") return;
if(srcElem.rowIndex == 0 ) return;
if (selRow != -1) selRow.runtimeStyle.backgroundColor = '';
srcElem.runtimeStyle.backgroundColor = slColor;
selRow = srcElem;
var oEvent = createEventObject();
oEvent.selected = selRow;
rowSelect.fire(oEvent);
}
//******************************************************
//onMouseOver
//******************************************************
function onMouseOver()
{
srcElem = window.event.srcElement;
//crawl up to find the row
while (srcElem.tagName != "TR" && srcElem.tagName != "TABLE")
srcElem = srcElem.parentElement;
if(srcElem.tagName != "TR") return;
if (srcElem.rowIndex > 0)
hilite(srcElem);
else
hilite(-1);
}
//******************************************************
//onMouseOut
//******************************************************
function onMouseOut()
{
// Make sure we catch exit from the table
hilite(-1, -1);
}
//******************************************************
//hilite
//******************************************************
function hilite(newRow)
{
if (hlColor != null )
{
if (currRow != -1 && currRow!=selRow)
{
currRow.runtimeStyle.backgroundColor = '';
}
if (newRow != -1 && newRow!=selRow)
{
newRow.runtimeStyle.backgroundColor = hlColor;
}
}
currRow = newRow;
}
//******************************************************
// sort
//
// global variables
//
//******************************************************
var tbody=null;
var theadrow=null;
var colCount = null;
var lastclick = -1; // stores the object of our last used object
var arrHitTest = new Array();
var bDragMode = false;
var objDragItem;
var arrHitTest = new Array();
var iArrayHit = false;
//******************************************************
//init
//******************************************************
function init() {
// get TBODY - take the first TBODY for the table to sort
tbody = element.tBodies(0);
if (!tbody) return;
//Get THEAD
var thead = element.tHead;
if (!thead) return;
theadrow = thead.children[0]; //Assume just one Head row
if (theadrow.tagName != "TR") return;
//theadrow.runtimeStyle.cursor = "hand";
colCount = theadrow.children.length;
var l, clickCell;
var cx=0;
var cy=0;
var c;
for (var i=0; i<colCount; i++)
{
clickCell = theadrow.children[i];
clickCell.selectIndex = i;
clickCell.attachEvent("onclick", doClick);
}
}
//******************************************************
//doClick
//******************************************************
function doClick(e)
{
var clickObject = e.srcElement;
var iFlg = null;
while (clickObject.tagName != "TD")
{
clickObject = clickObject.parentElement;
}
iFlg = 1;
var buttonflg;
buttonflg = ""
if (clickObject.selectIndex=="0") {
buttonflg="1";
} else if (clickObject.selectIndex=="1") {
buttonflg="2";
} else if (clickObject.selectIndex=="2") {
buttonflg="3";
} else if (clickObject.selectIndex=="4") {
buttonflg="4";
} else if (clickObject.selectIndex=="6") {
buttonflg="5";
}
if (buttonflg!="") {
insertionSort(tbody,tbody.rows.length-1,buttonflg);
}
}
//******************************************************
//formatNumtoStr
//******************************************************
function formatNumtoStr(Num){
var newNum
var i
var iCount
var iTemp
var iTempResult
var newNumResult
newNum = Num
for (i=0;i<=4;i++){
newNum = newNum.replace(" ","")
newNum = newNum.replace(" ","")
newNum = newNum.replace(",","")
}
newNumResult="-"
if (newNum.substr(0,1)=="-"){
for(i=1;i<=newNum.length-1;i++){
iTemp = newNum.substr(i,1)
if (iTemp=="0"){
iTempResult = "A"
}else{
iTempResult = 10-iTemp
}
newNumResult = newNumResult + iTempResult
}
newNum = newNumResult
}
if (newNum.length != 13){
iCount = 13-newNum.length
for (i=0;i<=iCount-1;i++){
newNum = "0" + newNum
}
}
return newNum
}
//******************************************************
//insertionSort
//******************************************************
function insertionSort(t,iRowEnd,buttonflg){
//var st = new Date();
var strArray;
var strResultArray;
var iMoveArray;
var intPointArray
var strCurrent;
var strInsert;
var strLast;
strArray = new Array();
strResultArray = new Array();
intPointArray = new Array();
for (i=0;i<=tbody.rows.length-1;i++){
//asp
if ((t.children[i].children[0].innerText == " " ) &&
(t.children[i].children[1].innerText == " " ) &&
(t.children[i].children[2].innerText == " " ) &&
(t.children[i].children[4].innerText == " " ) &&
(t.children[i].children[6].innerText == " ")){
break;
}
if( typeof(t.children[i]) != "undefined") {
if (buttonflg == "1"){
strArray.push(t.children[i].children[0].innerText
+ t.children[i].children[1].innerText
+ t.children[i].children[2].innerText
+ t.children[i].children[4].innerText
+ formatNumtoStr(t.children[i].children[6].innerText));
} else if (buttonflg == "2"){
strArray.push(t.children[i].children[1].innerText
+ t.children[i].children[0].innerText
+ t.children[i].children[2].innerText
+ t.children[i].children[4].innerText
+ formatNumtoStr(t.children[i].children[6].innerText));
} else if (buttonflg == "3"){
strArray.push(t.children[i].children[2].innerText
+ t.children[i].children[0].innerText
+ t.children[i].children[1].innerText
+ t.children[i].children[4].innerText
+ formatNumtoStr(t.children[i].children[6].innerText));
} else if (buttonflg == "4"){
strArray.push(t.children[i].children[4].innerText
+ t.children[i].children[0].innerText
+ t.children[i].children[1].innerText
+ t.children[i].children[2].innerText
+ formatNumtoStr(t.children[i].children[6].innerText));
} else {
strArray.push(formatNumtoStr(t.children[i].children[6].innerText)
+ t.children[i].children[0].innerText
+ t.children[i].children[1].innerText
+ t.children[i].children[2].innerText
+ t.children[i].children[4].innerText);;
}
strResultArray.push(strArray[i]);
} else {
strArray.push("");
strResultArray.push("");
}
intPointArray.push(0);
}
//数据sort
strResultArray.sort();
//移动行(核心算法)
for (i=0;i<=strResultArray.length-1;i++){
iMoveArray = new Array();
strCurrent = strResultArray[strArray.length-1-i];
if (strLast!=strCurrent){
for (j=0;j<=iRowEnd;j++){
strInsert = strArray[j];
if (strCurrent == strInsert){
iMoveArray.push(j + intPointArray[j]);
for (n=0;n<=j-1;n++){
intPointArray
= intPointArray
+ 1;
}
}
}
for(m=0;m<=iMoveArray.length-1;m++){
eRowInsert = t.children[iMoveArray[m]];
eRowWalk = t.children[0];
t.insertBefore(eRowInsert, eRowWalk);
}
strLast = strCurrent;
}
}
}
</script>
注意:其中formatNumtoStr函数是针对数字类型,而且假设是带逗号的13位数字类型。
结果:
结果:
相关文章推荐
- XMPP客户端关于用户组排序的一个可能的实现方法
- JavaScript 在客户端如何实现对表格数据的升降排序
- 关于客户端如何获取服务器时间的方法
- C++ 关于STL中sort()对struct排序的方法
- 关于APUE第十六章的客户端程序返回Servname not supported for ai_socktype错误的解决方法
- 表格排序 支持汉字按拼音排序,面向对象的使用方法
- [收藏]Jquery客户端拖拽排序方法
- 表头固定内容可滚动表格的3种实现方法
- JAVA实现表格排序的方法
- jquery实现表格本地排序的方法
- 关于表格溢出显示省略号的css解决方法
- jQuery html表格排序插件tablesorter使用方法详解
- 关于mysql中文排序的方法
- 关于数据源排序封装的4种方法
- 关于3个div,一个固定大小,两个自定义。方法
- 关于使用MySQL命令行客户端查询乱码的解决方法
- ASP.NET 关于判断是否是客户端“刷新”页面的方法 [转]
- 关于向 ASP.NET 网页动态添加客户端脚本的二个方法的区别
- javascript实现了客户端页面的表格排序
- agsXMPP客户端关于好友在线状态的设置及其响应的方法