在web前端開發(fā)中會(huì)遇到排序等功能,當(dāng)然也可以用服務(wù)器端來排序,今天我做一個(gè)筆記,怎么用js來實(shí)現(xiàn)這些復(fù)雜的功能呢。
在學(xué)習(xí)這個(gè)之前一定得用html dom jquery 的知識(shí),要不沒有辦法看明白的,當(dāng)然也不包括你是一個(gè)天才了。哈哈!
好了,先說一下思路,這里說一下,在學(xué)習(xí)一個(gè)js特效的時(shí)候思路很重要,可以說你不用對(duì)js多么的精通,但是一個(gè)功能放在你的面前,你必須有個(gè)很清晰的思路,這樣做起來就很容易了,就算是再困難的特效也不例外!
一共有四個(gè)步驟:首先要給觸發(fā)排序的控件添加事件,這里我就略過了。
1.把要排序的內(nèi)容添加到數(shù)組里
-
var tIndex=parseInt($(this).index());
-
var valueArray=new Array();
-
var p=0;
-
for(var i=1; i<$("table tr").length; i++){
-
-
if(tIndex!=0){
-
valueArray[p]=parseInt($("table tr:eq("+i+") td").eq(tIndex).html());
-
}else{
-
valueArray[p]=$("table tr:eq("+i+") td").eq(tIndex).html();
-
}
-
-
p++;
-
-
}
2.數(shù)據(jù)排序
-
//數(shù)據(jù)排序
-
if(pk==1){
-
valueArray.sort(function(a,b){ return a
-
pk=2
-
}else{
-
valueArray.sort(function(a,b){ return a>b ? -1:1})
-
pk=1
-
}
3.匹配內(nèi)容 加入到一個(gè)隱藏的排序div里
-
for(var i=0; i
-
for(var d=1; d<$("table tr").length; d++){
-
var valueText= tIndex!=0 ? parseInt($("table tr:eq("+d+") td").eq(tIndex).html()):$("table tr:eq("+d+") td").eq(tIndex).html();
-
if(valueArray[i]==valueText){
-
$("table tr").eq(d).clone().appendTo(".none")
-
}
-
}
-
-
}
4.重新整理html 排序,添加到視圖里
-
var titleClone=$("table tr").eq(0).clone(true);
-
$("table").html("").append(titleClone);
-
-
$("table").append($(".none").html())
-
-
$(".none").html("");
通過這四個(gè)步驟就可以實(shí)現(xiàn)你要js排序的功能了,是不是很簡(jiǎn)單呢,也可以通過這個(gè)例子舉一反三。這得看大家的想象力了。
|
姓名 |
年齡 |
出生年 |
分?jǐn)?shù) |
|
李百(L) |
15 |
1988 |
99 |
|
王易(W) |
25 |
2000 |
150 |
|
林明(L) |
18 |
1745 |
120 |
|
李姐(L) |
20 |
1996 |
130 |