「身為一個專業的資料表格(grid table),隨著鼠標滑過資料列時會變色是很合理的。正如我所說的,身為一個專業的資料表格,當資料列被點擊時會變色,也是很合理的」。一般來講,table資料列(row)的滑過變色,可以透過CSS樣式表設定:hover就可以完成,但是我們還需要一個「點擊變色」的效果,為了讓我們的資料表格表現的很專業,我們就必需來試試這個好用的plugin - colorize

用colorize來變色有多簡單?

$('#yourTableId').colorize() ;

沒錯,就是一句那麼簡單,接下來你就會發現你的資料表格已經晉陞為專業資料表格了(笑),這時候試著點擊資料的任何一列,他就會被換上代表標記的黃色底色,不過你可能想要的是只是選取一列,而不是多列,或則你不喜歡黃色的底色,這時候我們就給他一些選用的參數,下列是各選用參數的說明

$('#yourTableId').colorize({
    //交錯顏色,也就是斑馬紋,預設是#ECF6FC
    altColor : '#ECF6FC',
    //底色,預設是白色
    bgColor : 'white',
    //滑過時的顏色,預設是#BCD4EC
    hoverColor : '#BCD4EC',
    //選取的顏色,預設是黃色
    hiliteColor : 'yellow',
    //轉為以欄位變色,預設是false(換句話說就是以資料列變色)
    columns : false,
    //限定只能選取一項,預設是false
    oneClick : false,
    //將指定的欄位無法選取,預設是空陣列
    banColumns: []
}) ;

在大致上經過測試都沒什問題,不過在實作上我發現他似乎少了一個參數,那就是「預選」的功能,換句話說,我想要讓表格在網頁讀取完畢後,就將某幾列(或欄)標示已選取(黃色),原本想說以事件來觸發他選取變色的效果,不過第一次的寫法讓我碰到釘子

//觸發表格的第三列被點擊
$('tr:eq(2)',$('#yourTableId')).trigger('click');

=__= 沒有成功,很直覺得就是寫這樣,但不知道為什麼沒有成功,該死!我又要去趴原始碼了=3=,在啃完原始碼後,我改試了下列的方式

//將資料表的第三列變色
$('tr:eq(2)',$('#yourTableId')).trigger('mouseover');
$('tr:eq(2)',$('#yourTableId')).find('td').trigger('click');

=v=可以了耶!竟然要先觸發滑過的事件,再進行click,因為原始碼中有一個變數的註冊值,只當mouseover才會去做,click變色又必需使用到那個變數,再來就是他的事件是註冊在td而不是tr,呼~花了好多的時間ˋˊ

這邊要特別提醒是,表格的設計最好使用thead、tbody、tfoot的方式,這樣變色的作用才不會也套上了th的欄位列,你總不會想要讓使用者選取欄位列吧?而且這也是唯一讓欄位列不變色的方法。最後可喜的是他授權方式包含了MIT,所以可以安安心心的使用

在原始碼的第123行的find('tr:odd')、第124行find('tr:even')、和126行的find('td,th')選擇規則要修改一下,都在前面多加上find('tbody'),才能將作用的範圍限定在tbody裡面。
//原始程式碼
	jQuery(this).find('tr:odd').css('background', options.bgColor);
	jQuery(this).find('tr:even').css('background', options.altColor);
	var cells = jQuery(this).find('td,th');
//改成下列這樣
	jQuery(this).find('tbody').find('tr:odd').css('background', options.bgColor);
	jQuery(this).find('tbody').find('tr:even').css('background', options.altColor);
	var cells = jQuery(this).find('tbody').find('td,th');
(2009-05-20補充)

另外我同時找到相同效果的plugin - jQuery columnHover plugin,不過他沒有選取變色的功能,所以我放棄它

JQuery Colorize備存檔案載點

低溫烘培 發表在 痞客邦 PIXNET 留言(0) 人氣()