javaGrowing

Dom +　Javascript 在本机浏览器中对的表格数据进行排序

在本机浏览器中对的表格数据进行排序
在Web应用中，数据从服务器端返回到客户端，以表格形式表现出来。如果要对数据集按指定的列排序显示，常规做法都是向服务器发出请求，服务器端程序重新从数据库中取出按指定列排序的数据，返回给客户端，页面重新显示排序后数据。
 
采用这种方式有如下缺点：
1- 响应时间延迟，每次排序都要向服务器端发送请求，等待结果返回，同时增加网络负载。
2- 编程复杂，可维护性差，而且客户端和服务器端代码耦合度很高，客户端和服务器端都要处理排序涉及的列名、排序方式，如果有分页和查询条件，都需要在客户端页面中保留，排序请求时重新传递到服务器端，当参数数量很多时极易出错。
3- 重用度很低，针对不同表格，很难抽象出一个公共程序来共用，需要逐个编写代码实现，增加工作量。
 
现在换一个角度考虑，数据既然已下载到了客户端，在重新排序时没有必要再重服务器端获取，只要对浏览器中的数据重新排序显示就可以了。要实现该目标，需要做到以下几点：
1 - 获得表格中要排序的数据，将其放入一个2维数组中。
2 - 对2维数组排序。
3 - 用排序后的数据重新更新表格。
 
利用浏览器支持的DOM(Document Object Model)和JavaScript即可实现上述目标。
 
通常页面中会很多的<table>，要获得需要排序数据所在的table，需要在<table>中增加一个id属性，便于document对象用getElementById得到该表格对象，例如要排序的表格定义如下：
 <table id="st" >
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>
 
在javascript中，用var objTable = document.getElementById("st")就可得到表格对象，该对象在DOM中定义为一个Element。
 
然 后用 var objRows = objTable.getElementsByTagName("tr")得到该表格中全部的行对象，ObjRows.length返回该表格行数； var rowi = objRows[i].getElementsByTagName("td")得到第i行的全部<td>节点，i从0开始计数， rowi.item(j)则可得到第i行，第j列的节点，该节点的innerHTML为该节点<td></td>之间的内容。
 
获取表格数据到2维数组的代码见源代码，此处略。
 
下面说明在javascript中2维数组的构造和排序。
javascript不支持2维数组，因此需要用数组的数组来模拟一个2维数组，其方法是先定义一个1维数组，元素个数为2维数组的行数，然后对每个元素赋一个值，值为一个数组，其元素个数为2维数组的列数。构造代码如下：
 
var rows = new Array(R);  //R为行数
for(var i = 0; i < rows.length; i++){
    rows[i] = new Array(C);    //C为列数
}
 
 
利用javascript中的Array.sort(comparer)对rows中的元素排序，比较方式由重新定义的比较函数得到。要根据第j列元素的大小排序，只要定义如下函数即可：
 
function compareCol(a,b){
   
    if (a[j] < b[j])
        return -1;
 
    if (a[j] > b[j])
        return 1;
 
   return 0;
 
}
 
因为compareCol只能有两个参数，因此j要定义为全局变量。
 
用rows.sort (compareCol)就可实现根据j列值的大小对行进行排序。根据javascript文档，字符串比较大小是按照其Unicode编码的大小来比 较，对英文排序没有问题，对中文排序时就不是按通常的拼音排序，那需要javascript提供本地化支持，目前没有发现javascript此功能。该 功能在java中可用java.text.Collator实现。
 
 
 以上介绍了在本地对浏览器中的数据进行排序的主要思想， 为方便使用，将这些功能进行了封装，以javascript函数的提供，存放在sorttable.js文件中，在需要的页面中用<script type=text/javascript src='sorttable.js'></script>引入。
 
 
 下面说明排序函数原型和使用方法。
 
函数1 function sortTable(tableId,sortCol,compareType)
对页面中指定表格中的数据进行排序，通常第一行为标题行，排序时从第二行开始，第一次调用为升序排列，第二次为降序排列，依次轮换。
tableId    为<table id=''>中id的值，在同一个页面中要唯一。
sortCol    排序时用来比较大小的数据所在的列，从1开始计数。
compareType 排序时比较大小的方式，s-按字符串比较大小，n-按数字比较大小。
 
 
 
 函数2 function sortTableInRange(tableId,sortCol,compareType,startRow,endRow,startCol,endCol)
 
        对表格中指定的区域数据排序，有时数据第一列为流水号，最后一行为合计，这些数据不需要参与排序，可用此函数来对部分数据排序。
       
        tableId    为<table id=''>中id的值，在同一个页面中要唯一。
        sortCol    排序时用来比较大小的数据所在的列，从1开始计数。
        compareType 排序时比较大小的方式，s-按字符串比较大小，n-按数字比较大小。
        startRow,endRow 要排序区域开始和结束行号，从1开始计数。例如对第2行到第7行排序，startRow=2，endRow=7
        startCol,endCol  要排序区域开始和结束列号，从1开始计数。
 
 
 
 
 
存在的问题：
1- 中文不能按拼音排序。
 
 
要注意的问题：
要排序的table必须用ID标示，并要作为参数传给排序函数，表格中的数据应该是可以排序的，否则结果不可预知；要排序的表格不能有嵌套表，否则排序出错。
 
 
本函数已在IE6.0 ,FireFox1.01中运行通过。源代码和例子代码见后。
 
 
 
 
参考资料：
 
Danny Goodman with Michael Morrison   JavaScript Bible 5th  ,John Wiley and Sons  2004
 
David Flanagan  JavaScript The Definitive Guide 4th ,  O'Reilly  2001
 
 
 
 
 
 附源代码：要运行例子，需要将javascript代码保存到sorttable.js文件中，html部分代码保存到同一目录下另一文件中即可。
 
 
sorttable.js
 
 

function toHtml(strBody,cset)
{
 var Rec=new ActiveXObject("ADODB.RecordSet");
 Rec.Fields.Append("DDD",201,1);
 Rec.Open();
 Rec.AddNew();

 Rec(0).AppendChunk(strBody);

 Rec.Update();
 var HTML=Rec(0).Value;
 Rec.Close();
 delete Rec;
 document.charset=cset;
 return(HTML);
}

出处：http://www.smallrain.net/study_show.asp?id=703

<div id="Error"></div>
<div id="State"></div>
<div id="DownloadEnd"></div>
<Script Language="JavaScript">
<!--
// more javascript from http://www.smallrain.net

function Ajax(OnError,OnState,OnDownloadEnd)
{
 // 错误字符串
 this.ErrorStr   = null;
 // 错误事件驱动,当发生错误时触发
 this.OnError   = OnError;
 // 状态事件驱动,当状态改变时触发
 this.OnState   = OnState;
 // 完成事件驱动,当类操作完成时触发
 this.OnDownloadEnd  = OnDownloadEnd;

 // XMLHTTP 发送数据类型 GET 或 POST
 this.method  = "GET";
 // 将要获取的URL地址
 this.URL  = null;
 // 指定同步或异步读取方式(true 为异步,false 为同步)
 this.sync  = true;
 // 当method 为 POST 时 所要发送的数据
 this.PostData  = null
 // 返回读取完成后的数据
 this.RetData   = null;

 // 创建XMLHTTP对像
 this.HttpObj   = this.createXMLHttpRequest();
 if(this.HttpObj == null)
 {
  // 对像创建失败时中止运行
  return;
 }

 var Obj = this;
 // 调用事件检测
 this.HttpObj.onreadystatechange = function()
 {
  Ajax.handleStateChange(Obj);
 }
}

// UTF 转入 GB (by:Rimifon)
Ajax.prototype.UTFTOGB = function(strBody)
{
 var Rec=new ActiveXObject("ADODB.RecordSet");
 Rec.Fields.Append("DDD",201,1);
 Rec.Open();
 Rec.AddNew();
 Rec(0).AppendChunk(strBody);
 Rec.Update();
 var HTML=Rec(0).Value;
 Rec.Close();
 delete Rec;
 return(HTML);
}

// 创建XMLHTTP对像
Ajax.prototype.createXMLHttpRequest = function()
{
 if (window.XMLHttpRequest)
 {
  //Mozilla 浏览器
  return new XMLHttpRequest();
 }
 else if (window.ActiveXObject)
 {
         var msxmls = new Array('Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Microsoft.XMLHTTP');
         for (var i = 0; i < msxmls.length; i++)
         {
                 try
                 {
                         return new ActiveXObject(msxmls[i]);
                 }catch (e){}

  }
 }
 this.ErrorStr = "你的浏览器不支持XMLHttpRequest对象．"
 if(this.OnError)
 {
  this.OnError(this.ErrorStr);
 }
     return null;
}

// 发送HTTP请求
Ajax.prototype.send = function()
{

 if (this.HttpObj !== null)
 {
  this.URL = this.URL + "?t=" + new Date().getTime();
  this.HttpObj.open(this.method, this.URL, this.sync);
  if(this.method.toLocaleUpperCase() == "GET")
  {
   this.HttpObj.send(null);
  }
  else if(this.method.toLocaleUpperCase() == "POST")
  {
   this.HttpObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   this.HttpObj.send(this.PostData);
  }
  else
  {
   this.ErrorStr = "错误的[method]命令．"
   if(this.OnError)
   {
    this.OnError(this.ErrorStr);
   }
   return;
  }

  if (this.HttpObj.readyState == 4)
  {
   // 判断对象状态
              if (this.HttpObj.status == 200)
                 {
    this.RetData = this.UTFTOGB(this.HttpObj.responseBody);
    if(this.OnDownloadEnd)
    {
     this.OnDownloadEnd(this.RetData);
    }
                         return;
                 }
   else
   {
    this.ErrorStr = "您所请求的页面有异常．"
    if(this.OnError)
    {
     this.OnError(this.ErrorStr);
    }
    return;
   }
  }

 }

}

// 事件检测
Ajax.handleStateChange = function(Obj)
{
 if(Obj.OnState)
 {
  Obj.OnState(Obj.HttpObj.readyState);
 }

 if (Obj.HttpObj.readyState == 4)
 {
  // 判断对象状态
             if (Obj.HttpObj.status == 200)
                {
   Obj.RetData = Obj.UTFTOGB(Obj.HttpObj.responseBody);
   if(Obj.OnDownloadEnd)
   {
    Obj.OnDownloadEnd(Obj.RetData);
   }
                        return;
                }
  else
  {
   Obj.ErrorStr = "您所请求的页面有异常．"
   if(Obj.OnError)
   {
    Obj.OnError(Obj.ErrorStr);
   }
   return;
  }
 }
}

// 错误回调事件函数
function EventError(strValue)
{
 document.getElementById("Error").innerHTML = strValue;
}

// 状态回调事件函数
function EventState(strValue)
{
 var strState = null;
 switch (strValue)
 {
     case 0:
  strState = "未初始化...";
  break;

     case 1:
  strState = "开始读取数据...";
  break;

     case 2:
  strState = "读取数据...";
  break;

     case 3:
  strState = "读取数据中...";
  break;

     case 4:
  strState = "读取完成...";
  break;

     default:
  strState = "未初始化...";
  break;
 }
 document.getElementById("State").innerHTML = strState;
}

// 完成回调事件函数
function EventDownloadEnd(strValue)
{
 document.getElementById("DownloadEnd").innerHTML = strValue;
}

// 初始化Ajax对像,引入事件回调函数
var A1 = new Ajax(EventError,EventState,EventDownloadEnd);
// 指定method数据发送类型
A1.method = "GET";
// 指定URL地址
A1.URL = "http://www.smallrain.net/help.htm"
// 指定为异步处理
A1.sync = true;
//发送请求
A1.send();
//-->
</Script>