博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 对Table进行排序
阅读量:5245 次
发布时间:2019-06-14

本文共 2443 字,大约阅读时间需要 8 分钟。

使用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("order");//加上样式               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));

转载于:https://www.cnblogs.com/SoGood/archive/2011/05/30/2063464.html

你可能感兴趣的文章
Linux上安装Libssh2
查看>>
自定义EL函数
查看>>
stm32的电源
查看>>
splice的多种用法
查看>>
20162304 2017-2018-1 《程序设计与数据结构》第二周学习总结
查看>>
九.python面向对象(双下方法内置方法)
查看>>
2018-09-12
查看>>
go:channel(未完)
查看>>
[JS]递归对象或数组
查看>>
CSS与Theme的作用——Asp.Net
查看>>
LeetCode(17) - Letter Combinations of a Phone Number
查看>>
20165115 2017-2018-2 《Java程序设计》第四周学习总结
查看>>
Linux查找命令对比(find、locate、whereis、which、type、grep)
查看>>
WPF自定义集合控件概述与遇到的问题
查看>>
路由器外接硬盘做nas可行吗?
查看>>
python:从迭代器,到生成器,再到协程的示例代码
查看>>
pytest的参数化测试
查看>>
Java多线程系列——原子类的实现(CAS算法)
查看>>
安装Pygame和pip的艰辛之路
查看>>
Hibernate的实体类为什么需要实现 java.io.Serializable 接口
查看>>