EasyTable.js，令html的table布局變得非常簡單！，easytable.jstable

EasyTable.js，令html的table布局變得非常簡單！，easytable.jstable

過年之前由於工作的需要，我花了一周的時間開發了一個純js的網頁外掛程式，EasyTable.js。顧名思義，這個外掛程式就是用來處理html裡面的table的各種情況的。很多網站不喜歡使用table布局，因為table布局雖然排版能力強，但是改動能力差，一旦寫死之後想要增刪裡面的資料都會變得非常麻煩。但是table布局比起使用float布局有一個明顯的好處，那就是table布局可以很方便地加上邊框。而如果在一個float布局裡面的某個div標籤上加上哪怕只有1px的邊框，都會使得原本排列得好好的布局立刻就換行了。雖然可以通過其他方法解決這個問題，但畢竟解決方案並不簡便。而且，table布局對於同質資料（尤其是表格類的資料）來說，有著得天獨厚的優勢。好了，廢話不多說，馬上說一下我的外掛程式。這個外掛程式原大小是30k左右，經過壓縮之後只有14k，我想對於一個網頁來說，14k的小外掛程式應該還是可以接受的吧？相容性方面，在ie8以上的ie和Firefox、Google都是沒問題的。沒測試過safari和opera，但估計不會有任何問題。至於低版本的ie，呵呵，非常討厭，希望他們早日在中國市場消失吧，不去考慮相容他們了。能不能用，本人沒測試，看造化吧哈哈。

下面介紹一下怎麼使用這個外掛程式。（就算是官方api吧，哈哈，內容不多，保證一下子就學會的。）

首先，這個外掛程式真正需要用到的方法只有三個，其他的內部方法是不需要用到的。那麼我們就依次介紹一下這三個方法。

第一個方法是用來繪製table的，如下：

EasyTable.draw();

然後在該方法裡面傳入一個object，該object的內容如下（只有targetId是必選的，其他都可以選填）：

首先是targetId:"某某id", 這個屬性是必須填寫的，建立的table會作為子物件存放於指定id的對象。使用id是為了保證執行速率的最佳化，由於我不打算寫過多不必要的代碼在對象綁定這一塊上，所以只使用最簡單也是最有效率的document.getElementById()方法來處理對象的綁定。如果你的頁面裡面只有一個table的話，那麼可以在body下方加一個div，將我們的table置於該div下方即可。

接下來是col屬性，填寫的必須是數字，也就是決定你的table有多少列，如果不填的話那麼預設就是三列。

接著是row屬性，決定你的table有多少行。預設是一行。如果你現在有四個內容想要填寫進這個table，並且你設定的列數是3列的話，那麼第一行就會有你所放入的三個資料，第二行由外掛程式自動產生，第一個td存放你的第四個資料，後兩個td放空。

type屬性，目前只能填寫"vertical"，如果不填的話那麼你的資料就是按照正常的從第一行開始，然後第二行第三行排列以此類推，如果填寫vertical的話那麼資料就會縱向排列。但是必須注意的是，資料只有在總格數（也就是col和row的乘積）大於等於資料的總長度的時候才會正常排列。多出的部分會以正常的橫向排列自動擴充進你的表格當中。

data屬性，傳入一個數組，用於儲存你想要在table裡面存放的資料。當總格數大於data.length時會以空td自動補全table，小於時則會建立新的行來將資料存放進去。這個過程是自動的，使用者不需要擔心。

deuce屬性，這個單詞就是平分的意思。顧名思義，如果將這個屬性設定為true的話，那麼各列的寬度就會固定下來，按照100%除以列的數量進行平分，當然如果是想設定各列不同寬度的話，那就要用到下面的colStyle而不是這個deuce了。

tdStyle屬性，傳入一個字串，比如：tdStyle:"background-color:yellow;border:1px solid green;height:40px;"這個屬性將會影響全部td的Style，請注意。

trStyle和tableStyle屬性類比上面的tdStyle，就不再贅述了。

colStyle和rowStyle屬性，列屬性和行屬性，傳入的是數組，數組裡面從第一個值開始作用於指定的第一行 / 列。舉個例子，假設想要作用於第二行的背景色而不想作用於第一行的話，那麼就寫：colStyle:["","background-color:yellow"]; （實際上這兩個方法用得並不多，因為我給所有的tr和td都建立了特定的id，如果只想要局部操作的話用id對dom對象進行操作速度更快） 需要注意的是，如果調用了下面的插入行 / 列的方法，這兩個屬性對於新插入的行或者列是無效的。至於為什麼會無效，並不是我疏忽留下的bug，而是因為有時候項目需要對table進行插入時，插入的內容並不想受到原有的style的影響。如果覺得需要的話，自己再把屬性加上去就可以了。

接下來是colspan和rowspan方法，都是傳入一個object，樣本：colspan:{"(1,1)":2, "(2,2)":3} 雙引號裡面的座標和我們初中高中時學的座標是一樣的。(1,1)即表示第一行第一列的那一個，其他的以此類推，colspan是跨列，rowspan是跨行。我不建議大家過多使用這兩個方法，因為很容易造成表格混亂，而且colStyle和rowStyle屬性設定會被這些跨行和跨列的格子幹擾到。

接下來是添加列或者行的方法。

appendCol:{ 0:2, 1:4 }; 這個是在第一列後面再加兩列(空白列)，然後在第二列後面再加4列。同理prependCol   appendRow   prependRow方法就不需要介紹了吧？

接下來是emptyCol和emptyRow方法，可以傳入一個數字或者一個由數字組成的數組，清空指定的行和列的內容(注意不是把整行整列刪掉，只是清空裡面的內容而已)

接著是removeCol和removeRow，和上面用法一樣，這次就是徹底移除了。

再就是trAttr方法，樣本：trAttr: { "onclick": ["alert(1)", "alert(2)"] ,"onmouseover":["this.style.backgroundColor='red'"],"onmouseout":["this.style.backgroundColor='white'"]},

首先傳入的是一個對象，這個對象裡面的各個屬性就是不同的attr，比如onclick、onmouseover等等，這些屬性後面是一個數組，表示作用於第幾個tr。可能有人會說，這樣的方法處理整個表格也太麻煩了吧？沒錯，是非常麻煩。而且真正工作的時候也不會有人這麼弄的。這個方法僅僅是用於比較小的table，體積比較龐大的table對象，我們另有方法處理，放心。繼續看下去就豁然開朗了。

有trAttr就有tdAttr，下面還是給個樣本 tdAttr: {"onmouseover":["(1,1)[alert(1)]","(2,1)[alert(2)]"] },請仔細看好，這次是數組裡面存放了兩個字串，並且這兩個字串的格式都是一個座標加上一個偽數組。tdAttr同樣是使用起來不方便而且比較頭疼的方法，僅適用於小規模的table的使用。

最後一個屬性是callback，返回一個帶有table和tableid的function，便於使用者對這個table直接進行操作。本來我是打算將所有tr和td一併以數組的形式返回的，但是那樣的話會讓這個外掛程式增加不必要的體積，所以就算了。我相信得到table對象的話，要對table下方的tr和td操作也不是什麼難事吧？更何況我的tr和td還有特定的id（具體怎樣，使用者自己產生一個table然後debug看一下就一清二楚了，這裡就不浪費篇幅贅述了。）

使用樣本：callback:function(table,tableid){

table.style.backgroundColor = "red"; //返回的table對象是dom，可以直接操作。

// $("#"+tableid).css("background-color","red");         又或者用jquery的寫法

}

好了，到此為止，我們的EasyTable的第一個方法已經介紹完畢了。如果僅僅是用來產生不太複雜的靜態布局的話，上面的方法其實已經是綽綽有餘的了。但是正如剛才所提到的，如果是比較龐大的，或者是動態table布局，那麼上面的方法是還是不行的。於是下面將介紹兩個方法，也就是addTr和addTd，用於動態對Tr或者Td進行添加。這樣的話，配合ajax等請求資料的方法，使用者就可以實現動態地載入table了。好了，廢話不多說，下面請看：

addTr方法也是傳入一個object對象。為了清楚一下，順便總結一下上面的draw方法，我寫一個樣本：

var tables = [ ]; //首先建立一個數組，用於儲存所有的table，因為在一個html頁面裡面，EasyTable.js是可以無限次使用的。

var div = document.createElement("div"); //用js隨便建立一個div對象。

div.id = "abc";  //隨便給這個div對象一個id，這裡就隨便寫啦，abc就行了，只要讀者看得明白就行，如果讀者不懂js，只會jquery的話，那也無所謂，這幾句的作用相當於在body裡面建立一個div，然後把div的id命名為abc，說得這麼直白應該都懂了吧？

document.body.appendChild(div); //然後我們在body裡面隨便放一個div。

 EasyTable.draw({
        targetId: "abc",  //綁定那個div
        data: [1, 2, 3, 4, 5],
        deuce:true,
        tdStyle: "background-color:deepskyblue;text-align:center;border:1px solid gray;height:30px;",
        col: 3,
        callback: function (table) {
            tables.push(table); //這裡我把table對象放進上面建立的那個數組裡面了
        }
})

都說無圖無真相，那我就插入一張圖吧，我平時喜歡用Firefox和firebug調試，不過為了證明ie也是可以用這個外掛程式的，所以我先用ie測試。

EasyTable.addTr({
        target: tables[0],
        data: ["小明","小李"],
        styles: ["color:red;font-size:19px", ],
        attr: { "onclick": "alert(1)" },
        toggleStyle:"background-color:#ccc",
    })；

這是ie和Firefox的插入行的情況對比，在Firefox裡面，預設的字型的垂直置中的，但是ie並不是，所以需要自己設定一下，這裡就不贅述了。

target屬性指的是table對象，而不是其id，如果用jquery的話，其實可以這樣寫：

target: $("#EasyTable0")[0];   //用EasyTable建立的table，id是按照他們所建立的序號命名的，非常簡單，比如第一個就是EasyTable0，第二個就是EasyTable1。

首先是data，傳入數組，這個不需要再解釋了吧？

接著是style屬性，作用於一整行tr的，傳入的是字串，

接著是styles屬性，傳入的是數組，作用於這一行tr裡面的各個td。

接著是attr，傳入的是一個object，作用的是整行tr。

接著是attrs，傳入的是數組，數組裡面是各個object，類比attr，作用於各個td。

toggleStyle屬性，這個屬性和style其實是一樣的，但是它是周期迴圈的，一次執行的話，那麼下一次就不執行，再下一次又執行了。什麼意思呢，舉個例子，你現在對一個table插入五行（也就是調用了addTr()方法五次），設定了toggleStyle:"background-color:red"，那麼第一行就會變紅色，第二行不會，第三行又變成了紅色，第四行不會，第五行也變成了紅色……這樣就明白這個屬性的作用了吧？

如果想讓這個屬性是從第二個開始作用怎麼辦，只需要在draw的callback方法裡面加上一句：table.trToggleStyle = false; 就行啦。

同理，還有toggleAttr，和attr是一樣的，也是周期迴圈。要從第二個開始也可以在draw的callback裡面加上table.trToggleAttr = false; 不過估計這個比較少用吧？反正先開發著，以後可能會用到。

（剛剛那個toggleStyle不會變色是因為上面的樣本中td的背景色設定了天藍色，tr就無效了，所以我重新給出一個例子，這次我去掉了上面的tdStyle裡面的背景色，並且執行了addTr三次）

有了上面的方法之後，其實一般的動態插入資料的情況已經是可以輕鬆應付的了。（只需要寫一個for迴圈或者用jquery的$.each()重複執行這個addTr的方法即可。）

最後是addTd方法，和addTr方法大同小異，也是需要綁定一個目標table，然後進行插入，該方法會自動識別你指定的table的最後一個空位置，然後把東西放進去，而不會另起一行。不過需要注意的是，如果table是vertical方式排列並且格子數目已經不夠的情況下，那麼addTd就會變成正常的橫向排列插入。另外，emptyCol和emptyRow方法去掉的格子不算哈。

該方法同樣有data、style、attr、toggleStyle、toggleAttr等屬性，用法和上面的addTr方法是一模一樣的，就沒必要重複一遍了。如果想讓toggle屬性是從第二個開始作用，只需要在draw的callback方法裡面加上一句：table.tdToggleStyle = false; 就行啦。

好了，EasyTable.js的說明就介紹到這裡。下面當然就是給出連結了，歡迎大家使用：http://download.csdn.net/detail/sinolzeng/8456089

目前的版本可能會有個別小bug，如果大家發現問題的話，可以在這裡留言，我有空就會馬上處理和升級這個外掛程式的。最後祝各位程式員讀者朋友開工大吉，新年快樂，羊年行好運！！