• 最近学的用javascript给datagrid排序


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

      1function 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
     35var lastCol = -1;
     36function 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}
  • 相关阅读:
    CentOS7 安装Docker最新稳定版
    C#采集解析log文件及CSV文件数据到DataTable
    RedHat/CentOS8使用Bash脚本查看Linux上的系统信息
    DataTable Select用法总结
    web开发
    minio 文件服务器
    在 Idea 中使用 Maven
    UGUI源码分析(零): 环境搭建
    高德地图的使用 vueamap+vue
    unity 模型 工作流
  • 原文地址:https://www.cnblogs.com/shenba/p/785285.html
Copyright © 2020-2023  润新知