全部分求：包涵javascript排序的DataGrid控件

Question

写了一个测试用例, 正式版本还没有发布:)
以前看过一个把几千常用汉字组合也一大字串的代码, 有点恐怖了.
<style>
tr {background-color: #FFFFFF; font-size: 10pt}
</style><table id=tab border=0 cellspacing=1 cellpadding=0 width=600 bgcolor=#D4D0C8>
  <tr>
    <td>序号</td>
    <td>项目一</td>
    <td>项目二</td>
    <td>项目三</td>
    <td>项目四</td>
    <td>项目五</td>
  </tr>
  <tr>
    <td>1</td>
    <td>李白</td>
    <td>12.34</td>
    <td>Chinese</td>
    <td>padding-bottom</td>
    <td>TBODY</td>
  </tr>
  <tr>
    <td>2</td>
    <td>杜甫</td>
    <td>2918</td>
    <td>English</td>
    <td>border-left-width</td>
    <td>COLGROUP</td>
  </tr>
  <tr>
    <td>3</td>
    <td>白居意</td>
    <td>911</td>
    <td>America</td>
    <td>border-bottom</td>
    <td>FRAMESET</td>
  </tr>
  <tr>
    <td>4</td>
    <td>白求恩</td>
    <td>149.12</td>
    <td>Canada</td>
    <td>text-align</td>
    <td>VAR</td>
  </tr>
  <tr>
    <td>5</td>
    <td>李商隐</td>
    <td>79.812</td>
    <td>France</td>
    <td>list-style</td>
    <td>CAPTION</td>
  </tr>
  <tr>
    <td>6</td>
    <td>杜牧</td>
    <td>416.03</td>
    <td>Russia</td>
    <td>margin</td>
    <td>SUB</td>
  </tr>
</table><table id=tab2 border=0 cellspacing=1 cellpadding=0 width=600 bgcolor=#D4D0C8>
  <tr style="background-color: menu">
    <td>序号</td>
    <td>项目一</td>
    <td>项目二</td>
    <td>项目三</td>
    <td>项目四</td>
    <td>项目五</td>
  </tr>
  <tr>
    <td>1</td>
    <td>李白</td>
    <td>12.34</td>
    <td>Chinese</td>
    <td>padding-bottom</td>
    <td>TBODY</td>
  </tr>
  <tr>
    <td>2</td>
    <td>杜甫</td>
    <td>2918</td>
    <td>English</td>
    <td>border-left-width</td>
    <td>COLGROUP</td>
  </tr>
  <tr>
    <td>3</td>
    <td>白居意</td>
    <td>911</td>
    <td>America</td>
    <td>border-bottom</td>
    <td>FRAMESET</td>
  </tr>
  <tr>
    <td>4</td>
    <td>白求恩</td>
    <td>149.12</td>
    <td>Canada</td>
    <td>text-align</td>
    <td>VAR</td>
  </tr>
  <tr>
    <td>5</td>
    <td>李商隐</td>
    <td>79.812</td>
    <td>France</td>
    <td>list-style</td>
    <td>CAPTION</td>
  </tr>
  <tr>
    <td>6</td>
    <td>杜牧</td>
    <td>416.03</td>
    <td>Russia</td>
    <td>margin</td>
    <td>SUB</td>
  </tr>
</table><SCRIPT LANGUAGE="JavaScript"><!--
var sortTable       = null;     //表格排序的构造对象function meizzSortTable()
{
  this.IE = (window.navigator.appName=="Microsoft Internet Explorer");  this.tables = new Array();  //所有要被排序的 Table
  this.items  = new Array();  //当前排序的那列的内容
  this.heads  = new Array();
  this.numeric= false;        //指排序的内容是否为数字
  this.chinese= false;        //排序内容存在中文字符
  this.index  = null;         //当前正在排序的那个 Table 在表数组里的序号
  this.sortWay= true;         //为 false 时这倒排序
  this.flagId = "sortFlagButtonId";  this.add    = function(e)
  {
    if (!(e && e.tagName=="TABLE")){
      alert("对不起！你传入的对象不是 TABLE ，不能进行排序操作"); return false;}
    e.rows[0].className = "sortTableHead";
    var len = e.rows[0].cells.length;
    e.rows[0].className = "TableSort";
    var m = this.tables.length;
    for (var i=0; i<len; i++)
    {
      e.rows[0].cells[i].style.cssText = "border: 1px outset #D4D0C8; cursor: default";
      if(e.rows[0].cells[i].innerText.trim() != "")
        e.rows[0].cells[i].onclick = function(){sortTable.sortItemClick(this, m);}
    }
    this.tables[m] = e;
    this.heads[m] = null;
  }
  this.sortItemClick = function(e, m)
  {
    var td = searchObjByTagName(e, "TD");
    var tab= this.tables[m];
    this.sortWay = (this.heads[m] == td) ? !this.sortWay : true;
    this.heads[m] = td;
    var n  = td.cellIndex;
    this.items.length = 0;
    this.numeric  = true;
    this.chinese  = false;
    for (var i=1; i<tab.rows.length; i++)
    {
      var txt  = tab.rows[i].cells[n].innerText.trim();
      if ( this.numeric && isNaN(txt)) {this.numeric = false;}
      if (!this.chinese && /[^\x00-\xff]+/.test(txt)) this.chinese = true;
      this.items[this.items.length] = txt +"_"+ i;
    }
    this.sortFlag(this.sortWay, m);
    if (sortTable.chinese && !sortTable.IE)
    {
      alert("对不起，对表格的排序功能只适用于ＩＥ浏览器！");
      return false;
    }
    this.items = (this.sortWay) ? this.items.sort(this.condition) : this.items.sort(this.condition).reverse();
    this.moveCell(tab, this.items);
  }
  this.sortFlag = function(B, m)
  {
    var str = "<input type=button id='"+ this.flagId +""+ m +"'  align='absmiddle' "+
    " value='"+ (B?"▲":"▼") +"' title='"+ (B?"正":"倒") +"排序' disabled "+
    " style='font-size: 9pt; border:0; height: 12; background-color: transparent'>";
    var e  = getObjectById(this.flagId +""+ m); if(e) e.removeNode(true);
    this.heads[m].insertAdjacentHTML("beforeEnd", str);
  }
  this.asc = function(str)
  {
    try{ execScript("strAsc = ASC('"+ str +"')", "vbscript");}
    catch(e){window.status = "对不起！你的浏览器版本太低！不能支持排序！"; return false;}
    if(strAsc < 0) strAsc += 65535; return strAsc;
  }
  this.condition  = function(str1, str2)
  {
    var s1 = str1.substring(0, str1.lastIndexOf("_"));
    var s2 = str2.substring(0, str2.lastIndexOf("_"));
    if (sortTable.numeric) return(s1 - s2);
    else
    {
      var length = (s1.length > s2.length) ? s1.length : s2.length;
      for(var i=0; i<length; i++)
      {
        if(i==s1.length || i==s2.length) break;
        var n1 = (sortTable.chinese) ? sortTable.asc(s1.charAt(i)) : s1.charCodeAt(i);
        var n2 = (sortTable.chinese) ? sortTable.asc(s2.charAt(i)) : s2.charCodeAt(i);
        if(n1 != n2) return n1-n2;
      }
      return(s1.length - s2.length);
    }
  }
  this.moveCell = function(table, array)
  {
    var len = array.length, b = new Array();
    for(var i=0; i<array.length; i++) b[i] = parseFloat(array[i].match(/\d+$/));    for(var i=1; i<len; i++)
    {
      if(b[i-1] != i)
      {
        table.moveRow(b[i-1], i);
        for(var j=0; j<len; j++)
        {
          if(b[j]>=i && b[j]<b[i-1])
          b[j]++;
        }
        b[i-1] = i;
      }
    }
  }
} sortTable = new meizzSortTable();function attachScripting()
{
  sortTable.add(document.all.tab);
  sortTable.add(document.all.tab2);
}
window.attachEvent("onload", attachScripting);
function getObjectById(id)
{
  if (typeof(id) != "string" || id == "") return null;
  if (document.all) return document.all(id);
  try {return document.getElementById(id);} catch(e){ return eval(id);}
}
String.prototype.trim = function(){return this.replace(/(^\s*)|(\s*$)/g,"");}
function searchObjByTagName(obj, tag)
{
  while(obj!=null && typeof(obj.tagName) != "undefind")
  {
    if(obj.tagName == tag.toUpperCase()) return(obj);
    obj = obj.parentElement;
  }
  return null;
}//--></SCRIPT>

Answer 1

/*
描述:        排序表格控件
版本:        1.0
作者:        FlashSoft
创建日期:    2004-10-23
最新更新:    2004-10-26
备注:        排序内容仅包含TBODY标签里面的[支持多TBODY],THEAD,HFOOT标签不包含在内
            事件仅仅加载在THEAD标签内.
            如果不指定THEAD里面的type类型,那么将以字符排序
            现在可以指定的类型有String,CaseInsensitiveString,Number,Date
实例:        <thead>
                <tr>
                    <td type="String">String</td>
                    <td type="CaseInsensitiveString">String</td>
                    <td type="Number">Number</td>
                    <td type="Date">Date</td>
                </tr>
            </thead>
*/
<public:component>
<public:attach event="oncontentready" onevent="fnInit()" />
<public:attach event="onpropertychange" onevent="fnPropertychange()" />
<script language="JScript" type="Text/JScript">
<!--
var TrArray=new Array();
function fnInit(){
    var o=element;
    var oTHEAD,oTBODY,oTDTitle,oTR,i,j,L1,L2;    oTHEAD=o.all.tags("THEAD")[0].childNodes[0];
    oTBODY=o.tBodies;
    oTDTitle=oTHEAD.cells;
    
    arrow=document.createElement("SPAN");
    
    arrow.style.position="relative";
    arrow.style.top="-6px";
    arrow.style.fontFamily="webdings";
    arrow.style.fontSize="8pt";
    arrow.style.height="12px";
    arrow.style.overflow="hidden";    L1=oTBODY.length;
    for(i=0;i<L1;i++){//复制所有TBODY内所有TR到数组
        oTR=oTBODY[i].rows;
        L2=oTR.length;
        for(j=0;j<L2;j++){
            TrArray[TrArray.length]=oTR[j];
            }
        }
    L1=oTDTitle.length;
    for(i=0;i<L1;i++){
        oTDTitle[i].htc_SortOrder=false;
        oTDTitle[i].htc_TDIndex=i;
        }
    oTHEAD.attachEvent("onclick",function(){sortTable()});
    }
function sortTable(SortNode){
    var o=element,k=0,time=new Date(),SortNode=getParent(event.srcElement,"TD");
    var oTDIndex,oTDType,orders,oTBODY,oTR,tempa,tempb,i,j,L1,L2,fTypeCast;    oTDIndex=SortNode.htc_TDIndex;
    oTDType=SortNode.type;
    orders=SortNode.htc_SortOrder=!SortNode.htc_SortOrder;
    oTBODY=o.tBodies;    //内部函数
    function getParent(el,pTagName){//返回指定的父对象
        if(el==null)return null;
        else if(el.nodeType==1&&el.tagName.toLowerCase()==pTagName.toLowerCase())
            return el;
        else
            return getParent(el.parentNode,pTagName);
        }
    function CaseInsensitiveString(s){//转换为大写
        return String(s).toUpperCase();
        }
    function parseDate(s){//转换为毫秒的时间
        return Date.parse(s.replace(/\-/g,"/"));
        }
    //箭头
    if(orders)
        arrow.innerText="5";
    else
        arrow.innerText="6";
    SortNode.appendChild(arrow);
    //转换
    fTypeCast=String;//未指定的时候的方式
    switch(oTDType){
        case "Number"://数字的处理方式
            fTypeCast=Number;
            break;
        case "Date"://时间的处理方式
            fTypeCast=parseDate;
            break;
        case "CaseInsensitiveString"://大小写不区分
            fTypeCast=CaseInsensitiveString;
            break;
        }
    window.status="开始排序";
    TrArray.sort(
        function (a,b){
            if(fTypeCast(a.cells[oTDIndex].innerText)<fTypeCast(b.cells[oTDIndex].innerText))
                return orders?-1:+1;
            if(fTypeCast(a.cells[oTDIndex].innerText)>fTypeCast(b.cells[oTDIndex].innerText))
                return orders?+1:-1;
            return 0;
            }
        );
    window.status="排序完成";
    //显示排序后结果
    L1=oTBODY.length;
    for(i=0;i<L1;i++){
        oTR=oTBODY[i].rows;
        L2=oTR.length;
        for(j=0;j<L2;j++){
            oTR[j].swapNode(TrArray[k++]);
            window.status="更新 "+k+"行 使用时间:"+(new Date()-time)+"毫秒";
            }
        }
    }
function fnPropertychange(){
    /**/
    }//-->
</script>

Answer 2

这么巧，偶也写了一个HTC看到楼上的代码，不好意思再献丑了，呵呵

Answer 3

另一百分在.net版给了，谢谢。
也谢谢上面几位热心的朋友。。