关于客户端排序和表格头固定方法

最新推荐文章于 2022-04-05 18:21:33 发布
最新推荐文章于 2022-04-05 18:21:33 发布
阅读量1.3k 收藏
点赞数
分类专栏： WEB技术专栏 文章标签： button border div function table null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xjjcn/article/details/645576
版权
    数据直接在客户端页面上排序可以不需要重新访问数据库，而且速度很快。但是由于排序时候在客户端页面上进行，所以会随着数据量增加排序速度下降，因此客户端页面适合页面数据在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; 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>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    </tr> 
   <tr height="15">
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    </tr> 
    <tr height="15">
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</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[n] = intPointArray[n] + 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位数字类型。
结果：
 
 结果： 
xjjcn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
90.qt qml-Table表格组件(支持表头表尾固定/自定义颜色/自定义操作按钮/排序)
抵抗时间扭曲，坚持做一件有意义的事
05-29 2822
qt qml-Table表格组件(支持表头表尾固定/自定义颜色/自定义操作按钮/插入排序)
easyui 客户端排序
wangjun5159的专栏
06-06 2218
easyui 客户端排序排序
客户端对数据进行重新排序
aai51nd
04-20 472
现在我们常用的是ASP重新读取数据然后在进行排序，这样速度很慢，我想能不能直接在看护端进行排序呢，经过一段时间的试验，我发现了，如下方法可以实现哈，希望与大家分享，同时也希望各位高手提出意见或补充。QQ:23043603 Email:ljlsunny@126.com 第一步：首次从数据库中读取数据，并写入客户端的文本文件（比如 txtdata.txt）中,各个字段用逗号分隔，例如如下所示：
锁定表头和表头排序
Rixton的博客
04-02 1072
效果图如上，代码如下:$content 是最终返回所有数据的数组。  $sum_salesAmount_sort 和$sum_scount_sort 是所有只有零售额和零售量的数组。 $_SESSION['cross_border_channel_table2']=$content; $_SESSION['cross_border_table2_sum_salesAm...
js scoll table
yangw1125的专栏
01-11 120
div.DivContainer /* Div */{ overflow: scroll; height:expression((document.body.clientHeight-this.offsetTop-20>this.children[0].offsetHeight)?(this.children[0]....
html 播放器 XMLHttpRequest xhr
洪君的博客
12-30 732
http://xjj.dafeiyu.cn/小姐姐 http://xjj.jmwpower.top/小姐姐 http://xjj.jmwpower.top/get/get1.php视频播放列表 http://xjj.jmwpower.top/get/get2.phpurl http://xjj.dafeiyu.cn/fun/zy视频data.url http://xjj.dafeiyu.cn/fun/ks ...
BootstrapTable之前端导出、字段排序、表头固定
qzz12345的博客
04-05 3738
BootstrapTable使用 BootstrapTable是一个高效的表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 前言 本文章记录的是利用BootstrapTable实现数据展示、数据导出（前端导出）、字段排序、表头固定（设置height属性即可） 提示：以下是本篇文章正文内容，下面案例可供参考 一、BootstrapTable实现数据展示 直接上代码： <div class="col-md-12">
bootstrap table固定表头 以及 表头与表体对齐
weixin_42213796的博客
04-28 2393
1.表头与表体对齐 第一步：给table加 table-layout:fixed .bootstrap-table .table{ table-layout:fixed; } 第二部：给表的每一列加宽度 columns: [{ checkbox : true, title : '复选框', field : 'pkid1', hali...
asp网页表头固定解决
12-11
在ASP.NET开发中，GridView控件是常用的数据显示控件，尤其在处理大量数据时，它提供了灵活的排序、分页和筛选功能。然而，当页面滚动时，GridView的表头通常会随着滚动条一起移动，这在用户查看表格底部内容时可能...
smart-table::thumbs_up:Smart Table 组件 专处理纯静态table的固定头列及排序功能
04-26
专处理纯静态table固定头列及排序功能 此组件库常用于服务端处理数据后直接返回HTML渲染，在客户端需要表格的多样化交互功能。 -- 初衷 -- 在不依赖其他库时，对服务端已返回的完整Table增加客户端的组件交互功能 --...
js实现的3种好看的表样式，包括顶部有表头，左侧有表头，顶部和左侧都有表头
05-24
JavaScript作为客户端的主要脚本语言，提供了丰富的库和方法来实现各种各样的表格样式。本资源包提供的是三种不同的js实现的表格样式，分别对应顶部有表头、左侧有表头以及顶部和左侧都有表头的布局，旨在帮助开发者...
html 表头固定，基于ext的
07-24
本主题关注的是如何在EXT框架下实现HTML表格的表头固定效果，EXT是一个强大的JavaScript库，常用于构建富客户端应用。 EXT提供了丰富的组件和布局管理，对于创建复杂的用户界面非常有帮助。在处理固定表头的问题上...
数据表客户端排序及其他特色实现
Felix 技术园地
08-25 1146
        当我们的页面中数据表行非常多时，为了很方便的找到我们需要的及相关纪录行时，大都采用排序的方式，对于现在的开发，几乎不需要写什么代码就能很容易的排序，如：asp.net 2.0中的GridView，如果数据源是DataSet的话，什么都不用写，仅需要设置几个属性就可以了。但这种排序存在着性能上劣势，因为你每次排序时，都会提交该页面，在服务器端进行相应的排序操作，然后将生成的排序页面传
创建可拖动列的DataGrid（2）
嗨！您好！Welcome my blog
10-17 796
 Public nColumn As Int32 = 0 Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)  Dim _dsContacts As DataSet   装载XML数据原，注意：这里与数据原类型没有关系，换成数据库也是适用的   _dsContacts = New DataSet()
tablesorter的使用(客户端表格排序)
厚积薄发
01-21 1070
tablesorter下载地址:http://tablesorter.com/ 先简单介绍下tablesorter: tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes...
Struts技术介绍
xjjcn（杰与杰伦）的专栏
03-06 5753
Struts技术介绍 一． 基本概念1． 框架（Framework）：可重用的，半完成的应用程序，可以用来产生专门的定制程序。2． 模型（Model）：就是封装数据和所有基于对这些数据的操作，也就是事务逻辑。3． 视图（View）：就是封装的是对数据显示，即用户界面。4． 控制器（Control）：就是封装外界作用于模型的操作和对数据流向的控制等。5． MVC模式：模型+视
ASP.NET GridView：无代码分页、排序与功能详解
- 提供了两种方法改变鼠标悬停在GridView某一行时的背景色，这通常通过CSS样式和客户端脚本（如jQuery）来实现。 5. **用户交互确认**： - 在删除操作时，可以设计一个确认对话框，确保用户在删除数据前得到提示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值