使用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));