[jQuery plugin] waTable的誕生

分類: jQuery|技術分享 作者: abu

22 4 月 2009

一個平凡的表格,能賦予怎樣的功能?
watable1

記得很久之前,古老記憶中,jace說可以試試看幫比一比擴充一下功能,就是可以自由新增table的欄位,利用這次順便練習jQuery自製plugin,既然是從哇寶誕生的,名稱里所當然就是wa開頭,跟table有關,那就叫做waTable吧!(好草率的命名,要是孩子剛出生要命名的時候,看到了窗外鳥正在大便.......),好,名稱只是個浮名,也不用太追究了。

卡關部份:
1.首先希望能夠上下左右都能隨意新增,所以新增的按鈕要設在哪呢?就直接出現在table的四面八方吧,而且按鈕大小要隨著table變寬變高而隨時調整。
2.一個普通的表格,沒任何rowspan或是colspan的話,難易度大概是0,如果和(ㄏㄨㄛˋ)上了rowspan和colspan這兩個元素,難度真的是大大提昇,而且上下左右新增的方式,不太有對稱的觀念,就是"往右新增"和"往左新增",程式基本上是沒辦法複製過來改個函式名稱就打完收工。

大致攻略:
整個概念就是先利用一個div將原本table包住,然後將該table的margin-left、margin-right等等,一些定位的CSS屬性全部移轉到div上,接著創造四個浮動div按鈕,設定好寬度高度,擺放到table的上下左右,在div上使用jQuery的hover方法,讓按鈕可出現隱藏,這樣就完成了基本架構。 剩下的就是大工程了,往上下左右新增,以及當遇到rowspan、colspan要如何計算等等,目前尚在開發中,所以還需要測試更多的表格組合,找出bug,預設值是左右新增遇到colspan的話,會將該欄位直接延伸,上下遇到rowspan一樣是延伸,以後會陸陸續續將設定參數加入plugin,讓使用者能更加活用。

使用方式:

載入 jQuery 及 watable

<script src="jquery.js" type="text/javascript"></script>
 
<script src="watable.js" type="text/javascript"></script>

html 格式

<table border="0">
<tbody>
<tr>
<td rowspan="2">1111</td>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td colspan="2">1111</td>
<td>1111</td>
<td>1111</td>
</tr>
</tbody></table>

最後加入

$(function(){
	$('table').waTable();
});

呈現效果:
watable2

關於這類的plugin,其實我不知道是不是已經有人寫出來了,如果有的話,就當作練習jQuery的plugin寫法,沒有的話,更應該好好將完成度提昇,像是原本表格中,有填寫的欄位,而且帶有id或是name,需要被送到後台程式做處理,那新增的欄位中,該如何將這些欄位加進去等等,未來陸續還有很多可增加的功能,按鈕外觀設計,以及bug修正,也希望這個小服務能有更多應用的地方?!

我要留言

關於這裡

這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。