• js 对Table进行排序


    使用js对Table进行排序的方法.作用时,只需要自定义3个样式,ASC正序排序时,需要显示在新增加span中的图片或样式.DESC,NONE同样.

    引入jquery框架.

    使用table_Sort("GridView1",new Array(1,2));调用 .

    首先,需要对应的3条css

           .asc{ color:Red;}
            .desc{color:Blue;}
            .none{color:Yellow}
    

    需要的JS

    代码需要Jquery的支持

      function table_Sort(name,col) {
               var table = $("#" + name);
               var table_th = table.find("> tbody >  tr > th");//使用个>符号,可以只查询到指定的路径下.可防止Table中,嵌套Table时出错.
               if (!col || col.length == 0) {//如果未指定列进行操作,默认对所有列进行排列
                   col = new Array();
                   for (var z in table_th) col.push(z);
               }
               for (var z in col) {
                   table_th.eq(col[z]).css("cursor", "pointer");//加上手势
                   table_th.eq(col[z]).append("<span class='none' type='order'>order</span>");//加上样式
                   table_th.eq(col[z]).click(function(index) {
                       var th = $(this);
                       var rule = th.find("span[type=order]").eq(0).attr('class');//获取应该进行排列的方式
                       table.find("> tbody >  tr > th").find("span[type=order]").attr('class', 'none');//将所有排序设置为默认
                       if (rule == 'desc') th.find("span[type=order]").eq(0).attr('class', 'asc');
                       else th.find("span[type=order]").eq(0).attr('class', 'desc');
                       var index = table.find("tr:first-child").find("th").index(th[0]);
                       var arr_tr = table.find("> tbody > tr");
                       var size = arr_tr.size();
                       for (var i = 1; i < size - 1; i++) {
                           for (var y = i + 1; y < size; y++) {
                               arr_tr = table.find("> tbody > tr");
                               var leftvalue = arr_tr.eq(i).find(" > td").eq(index).html().toLowerCase();
                               var rightvalue = arr_tr.eq(y).find(" > td").eq(index).html().toLowerCase();
                               if (rule == 'desc') {
                                   if (leftvalue < rightvalue) {
                                       arr_tr.eq(i).before(arr_tr.eq(y));
                                   }
                               }
                               else {
                                   if (leftvalue > rightvalue) {
                                       arr_tr.eq(i).before(arr_tr.eq(y));
                                   }
                               }
                           }
                       }
                   });
               }
             
           }
    

    调用,第2个参数可以不写,不写,默认对所有列进行排序

    table_Sort("GridView1",new Array(1,2));
    
  • 相关阅读:
    一篇文章教会你理解Scrapy网络爬虫框架的工作原理和数据采集过程
    Windows下安装Scrapy方法及常见安装问题总结——Scrapy安装教程
    Spring AOP里面的通知Advice类型
    Spring AOP面向切面编程核心概念
    ZeroC ICE的远程调用框架 Callback(一)-AMI异步方法调用框架
    ZeroC ICE的远程调用框架 class与interface
    ZeroC ICE的远程调用框架 AMD
    ZeroC ICE的远程调用框架
    ZeroC ICE中的对象模型和概念
    ZeroC ICE中的对象
  • 原文地址:https://www.cnblogs.com/SoGood/p/2063464.html
Copyright © 2020-2023  润新知