Home » jQuery 外掛

[jQ]Responsive Table Plugin

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

responsive-table-plugin-0

Responsive Table Plugin 是一個能產生類似 Excel 凍結欄位的外掛套件，同時可以運用在 RWD 設計的網頁中！

套件名稱：Responsive Table Plugin
套件網址：N/A
作者網站：http://declanbright.xtreemhost.com/jquery-plugin-responsive-table
套件網址：N/A
發佈日期：2013-07-17
檔案大小：2.06 KB
檔案下載：jquery.responsivetable.min.js

參數選項說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

staticColumns(選填)
描述： 要固定的欄位數
預設值： 1
 
scrollRight(選填)
描述： 是否將捲軸移到最右邊
預設值： true
 
scrollHintEnabled(選填)
描述： 是否啟用提示
預設值： true
 
scrollHintDuration(選填)
描述： 提示訊息顯示的時間
預設值： 2000

方法說明：

檢視原始碼 JavaScript
1
2

// 將指定區塊中的圖片加上 BlackAndWhite 效果
$(selector).BlackAndWhite(options);

使用範例：

檢視原始碼 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.responsivetable.min.js"></script>
<style type="text/css">
	table {
		width: 100%;
		border-collapse: collapse;
	}
	th, td {
		white-space: nowrap;
		border: 1px solid #666;
		padding: 3px 4px;
	}
	#demo {
		width: 650px;
		border: solid 4px #bbb;
	}
	.overflowContainer #table2 {
		background-color: #fffa96;
	}
</style>
<script type="text/javascript">
	$(function(){
		$('#table1').responsiveTable();
 
		// 固定 2 欄
		// 啟用提示效果
		$('#table2').responsiveTable({
			staticColumns: 2,
			scrollRight: true,
			scrollHintEnabled: true
		});
	});
</script>
 
<body>
	<h3>Table 1</h3>
	<table id="table1">
		<tr>
			<th>Column A</th>
			<th>Column B</th>
			<th>Column C</th>
			<th>Column D</th>
			<th>Column E</th>
			<th>Column F</th>
			<th>Column G</th>
		</tr>
		<tr>
			<td>Content Cell A1</td>
			<td>Content Cell B1</td>
			<td>Content Cell C1</td>
			<td>Content Cell D1</td>
			<td>Content Cell E1</td>
			<td>Content Cell F1</td>
			<td>Content Cell G1</td>
		</tr>
		<tr>
			<td>Content Cell A2</td>
			<td>Content Cell B2</td>
			<td>Content Cell C2</td>
			<td>Content Cell D2</td>
			<td>Content Cell E2</td>
			<td>Content Cell F2</td>
			<td>Content Cell G2</td>
		</tr>
		<tr>
			<td>Content Cell A3</td>
			<td>Content Cell B3</td>
			<td>Content Cell C3</td>
			<td>Content Cell D3</td>
			<td>Content Cell E3</td>
			<td>Content Cell F3</td>
			<td>Content Cell G3</td>
		</tr>
		<tr>
			<td>Content Cell A4</td>
			<td>Content Cell B4</td>
			<td>Content Cell C4</td>
			<td>Content Cell D4</td>
			<td>Content Cell E4</td>
			<td>Content Cell F4</td>
			<td>Content Cell G4</td>
		</tr>
		<tr>
			<td>Content Cell A5</td>
			<td>Content Cell B5</td>
			<td>Content Cell C5</td>
			<td>Content Cell D5</td>
			<td>Content Cell E5</td>
			<td>Content Cell F5</td>
			<td>Content Cell G5</td>
		</tr>
		<tr>
			<td>Content Cell A6</td>
			<td>Content Cell B6</td>
			<td>Content Cell C6</td>
			<td>Content Cell D6</td>
			<td>Content Cell E6</td>
			<td>Content Cell F6</td>
			<td>Content Cell G6</td>
		</tr>
		<tr>
			<td>Content Cell A7</td>
			<td>Content Cell B7</td>
			<td>Content Cell C7</td>
			<td>Content Cell D7</td>
			<td>Content Cell E7</td>
			<td>Content Cell F7</td>
			<td>Content Cell G7</td>
		</tr>
		<tr>
			<td>Content Cell A8</td>
			<td>Content Cell B8</td>
			<td>Content Cell C8</td>
			<td>Content Cell D8</td>
			<td>Content Cell E8</td>
			<td>Content Cell F8</td>
			<td>Content Cell G8</td>
		</tr>
	</table>
 
	<h3>Table 2</h3>
	<div id="demo">
		<table id="table2">
			<tr>
				<th>Column A</th>
				<th>Column B</th>
				<th>Column C</th>
				<th>Column D</th>
				<th>Column E</th>
				<th>Column F</th>
				<th>Column G</th>
			</tr>
			<tr>
				<td>Content Cell A1</td>
				<td>Content Cell B1</td>
				<td>Content Cell C1</td>
				<td>Content Cell D1</td>
				<td>Content Cell E1</td>
				<td>Content Cell F1</td>
				<td>Content Cell G1</td>
			</tr>
			<tr>
				<td>Content Cell A2</td>
				<td>Content Cell B2</td>
				<td>Content Cell C2</td>
				<td>Content Cell D2</td>
				<td>Content Cell E2</td>
				<td>Content Cell F2</td>
				<td>Content Cell G2</td>
			</tr>
			<tr>
				<td>Content Cell A3</td>
				<td>Content Cell B3</td>
				<td>Content Cell C3</td>
				<td>Content Cell D3</td>
				<td>Content Cell E3</td>
				<td>Content Cell F3</td>
				<td>Content Cell G3</td>
			</tr>
			<tr>
				<td>Content Cell A4</td>
				<td>Content Cell B4</td>
				<td>Content Cell C4</td>
				<td>Content Cell D4</td>
				<td>Content Cell E4</td>
				<td>Content Cell F4</td>
				<td>Content Cell G4</td>
			</tr>
			<tr>
				<td>Content Cell A5</td>
				<td>Content Cell B5</td>
				<td>Content Cell C5</td>
				<td>Content Cell D5</td>
				<td>Content Cell E5</td>
				<td>Content Cell F5</td>
				<td>Content Cell G5</td>
			</tr>
			<tr>
				<td>Content Cell A6</td>
				<td>Content Cell B6</td>
				<td>Content Cell C6</td>
				<td>Content Cell D6</td>
				<td>Content Cell E6</td>
				<td>Content Cell F6</td>
				<td>Content Cell G6</td>
			</tr>
			<tr>
				<td>Content Cell A7</td>
				<td>Content Cell B7</td>
				<td>Content Cell C7</td>
				<td>Content Cell D7</td>
				<td>Content Cell E7</td>
				<td>Content Cell F7</td>
				<td>Content Cell G7</td>
			</tr>
			<tr>
				<td>Content Cell A8</td>
				<td>Content Cell B8</td>
				<td>Content Cell C8</td>
				<td>Content Cell D8</td>
				<td>Content Cell E8</td>
				<td>Content Cell F8</td>
				<td>Content Cell G8</td>
			</tr>
		</table>
	</div>
</body>

範例 1

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

註：如果使用在 Ajax 上，就算更新了 tr 後也不會更新凍結的欄位，需要先把效果還原

檢視原始碼 JavaScript
1
2
3

$table.closest('.responsiveTableContainer').find('.staticContainer').remove().end().end().unwrap().unwrap().find('tr:first th').css('display', '');
 
// $(window).trigger('resize');

2 筆針對 [jQ]Responsive Table Plugin 的迴響

發表迴響