最近学的用javascript给datagrid排序

比较简单的排序方法,对于小型的排序,在客户端完成就可,麻烦客户端,以来刷新麻烦来回传数据,二来写代码也容易出错.
调用方法:给datagrid的表头的各个列标题添加onclick事件,然后调用sortTable('tblId', colIndex),分别传入要排序的表或datagrid的id号,要排序的列的索引 例如
<asp:BoundColumn DataField="gb_id" HeaderText="&lt;div οnclick=&quot;sortTable('dgResult', 0)&quot;&gt;ID&lt;/div&gt;"></asp:BoundColumn>

 

  1 function  compareMutiTRs(colIndex)
  2 {
  3    return function compareTRs(tr1, tr2)
  4                {
  5                        var value1;
  6                        var value2;
  7                        //必须得考虑到 合并单元格的问题 
  8                        var isNull = (tr2.cells[colIndex]== null || tr1.cells[colIndex] ==  null)
  9                        if (isNull)
 10                        {
 11                                value1 = tr1.cells[0].firstChild.nodeValue;
 12                                value2 = tr2.cells[0].firstChild.nodeValue;
 13                       }
 14                       else
 15                       { 
 16                               value1 = tr1.cells[colIndex].firstChild.nodeValue;
 17                               value2 = tr2.cells[colIndex].firstChild.nodeValue;
 18                       }
 19                        
 20                        if (value1 > value2)
 21                        {
 22                            return 1;
 23                        }
 24                        else if (value1 < value2)
 25                        {
 26                            return -1;
 27                        }
 28                        else
 29                        {
 30                            return 0;
 31                        }
 32             }
 33}
 34
 35 var  lastCol  =   - 1 ;
 36 function  sortTable(tblId, colIndex)
 37 {
 38    var tbl = document.getElementById(tblId);
 39    var trs = tbl.rows;
 40    var arrayTRs = new Array();
 41    var lastTR = null;
 42    var start;
 43    var end;
 44    
 45    var flagUp = trs[0].cells.length == 1;
 46    var flagDown = trs[trs.length - 1].cells.length == 1
 47    if (flagUp)//如果分页提示在上
 48    {
 49            start = 2;
 50            end = trs.length;
 51    }
 52    else if (flagDown)//如果分页提示在下
 53    {
 54            start = 1;
 55            end = trs.length -1;  
 56    }
 57    else if (flagUp && flagDown)//上下都有分页提示
 58    {
 59            start = 2;
 60            end = trs.length - 1; 
 61    }
 62    else//上下都没有分页提示
 63    {
 64            start = 1;
 65            end = trs.length; 
 66    }
 67    
 68    if (trs[trs.length - 2].cells.length != trs[trs.length - 1].cells.length)
 69    {
 70           lastTR = trs[trs.length - 1];//把最后一行保存起来
 71    }
 72     
 73    for (var i = start; i < end; i++)//
 74    {
 75            arrayTRs.push(trs[i]);
 76    }
 77    
 78    if (colIndex == lastCol)
 79    {
 80            arrayTRs.reverse();
 81    }
 82    else
 83    {
 84            arrayTRs.sort(compareMutiTRs(colIndex));
 85    }
 86    
 87    var fragment = document.createDocumentFragment();
 88    
 89    for (var j = 0; j < arrayTRs.length; j++)
 90    {
 91            fragment.appendChild(arrayTRs[j]);
 92    }
 93    
 94    if (lastTR != null)
 95    {
 96            fragment.appendChild(lastTR);
 97    }
 98    
 99    tbl.tBodies[0].appendChild(fragment);
100    
101    lastCol = colIndex;
102}

转载于:https://www.cnblogs.com/shenba/archive/2007/06/15/785285.html