Home » jQuery 外掛

[jQ]Stupid jQuery table plugin

[ 日期： | 瀏覽：8,620 | 迴響：搶沙發 ]
範例 1
請協助我把這個效果加到我的網站 (只要 900 元)
沒錯!只要 900 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



就像叫"無名"的通常都是高手一樣，雖然取名為 Stupid jQuery table plugin，但它用簡單的方式提供了 int、float 及 string 的欄位排序功能，且還能自訂屬於自己的特定屬性排序哩。

套件名稱：Stupid jQuery table plugin
套件網址：N/A
作者網站：http://joequery.github.com/Stupid-Table-Plugin/
套件網址：N/A
發佈日期：2012-04-30
檔案大小：4.12 KB
檔案下載：stupidtable.js

參數選項說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7

sortFns(選填)
描述： 用來排序的函式
預設值： {
		"int":function(a,b){ return parseInt(a, 10) - parseInt(b,10); },
		"float":function(a,b){ return parseFloat(a) - parseFloat(b); },
		"string":function(a,b){ if (a<b) return -1; if (a>b) return +1; return 0;}
	}

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定的 Table 轉換成 stupidtable 效果
$(selector).stupidtable(sortFns);

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="stupidtable.js"></script>
<style type="text/css">
	table {
	  width: 100%;
	  border-collapse: collapse;
	}
	th, td {
	  text-align: left;
	  padding: 5px 10px;
	  border-bottom: 1px solid #aaa;
	}
	dt {
	  color: #222;
	  font-weight: 700;
	}
	th {
	  color: #222;
	  cursor: pointer;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 把 #sampleTable 轉換成 stupidtable 效果
		$('#sampleTable').stupidtable();
 
		// 把 #complexTable 轉換成 stupidtable 效果
		// 並加上自訂的日期排序方式
		$('#complexTable').stupidtable({
			'date': function(a,b){
				var date_from_string = function(str){
					var months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
					var pattern = '^([a-zA-Z]{3})\\s*(\\d{2}),\\s*(\\d{4})$';
					var re = new RegExp(pattern);
					var DateParts = re.exec(str).slice(1);
 
					var Year = DateParts[2];
					var Month = $.inArray(DateParts[0].toLowerCase(), months);
					var Day = DateParts[1];
					return new Date(Year, Month, Day);
				}
 
				aDate = date_from_string(a);
				bDate = date_from_string(b);
 
				return aDate - bDate;
			}
		});
	});
</script>
 
<body>
	<h3>簡單的表格</h3>
	<table  id="sampleTable">
		<thead>
			<tr>
				<th class="type-int awesome">整數</th>
				<th class="type-float">帶有小數</th>
				<th class="type-string">文字字串</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>15</td>
				<td>-.18</td>
				<td>banana</td>
			</tr>
			<tr>
				<td>95</td>
				<td>36</td>
				<td>coke</td>
			</tr>
			<tr>
				<td>2</td>
				<td>-152.5</td>
				<td>apple</td>
			</tr>
			<tr>
				<td>-53</td>
				<td>88.5</td>
				<td>zebra</td>
			</tr>
			<tr>
				<td>195</td>
				<td>-858</td>
				<td>orange</td>
			</tr>
		</tbody>
	</table>
 
 
	<h3>複雜的表格</h3>
	<table id="complexTable">
		<thead>
			<tr>
				<th class="type-int awesome">整數</th>
				<th class="type-float">帶有小數</th>
				<th class="type-string">文字字串</th>
				<th>不排序</th>
				<th class="type-date">日期</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>15</td> <td>-.18</td> <td>banana</td> <td>arbitrary</td>
				<td>Mar 15, 1986</td>
			</tr>
			<tr class="awesome">
				<td>95</td> <td>36</td> <td>coke</td> <td>pointless</td>
				<td>Feb 27, 2086</td>
			</tr>
			<tr>
				<td>2</td> <td>-152.5</td> <td>apple</td> <td>silly</td>
				<td>Aug 07, 2004</td>
			</tr>
			<tr>
				<td>-53</td> <td>88.5</td> <td>zebra</td> <td>eccentric</td>
				<td>Sep 15, 2002</td>
			</tr>
			<tr>
				<td>195</td> <td>-858</td> <td>orange</td> <td>garbage</td>
				<td>Mar 15, 1986</td>
			</tr>
		</tbody>
	</table>
</body>

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

備註:
使用時只要在 th 中指定特殊的樣式名稱即可，樣式名稱規則為 type-屬性。

發表迴響