2011-02-15 60 views
2

我有一個使用tablesorter插件的大表(24列),以節省一些空間,我使用垂直圖像在標題內顯示標題。jQuery tablesorter插件 - 禁止在圖像內對圖像進行排序

我有一個點擊事件附加到幾個選定的圖像,這將打開旁邊的標題標題被點擊的第二個表(通過jQuery對話框)。我遇到的問題是,當我點擊圖像時,tablesorter也在對列進行排序(我不想發生這種情況),所以我試圖找到一種方法來以某種方式禁用排序,但只有當我點擊標題圖片。

任何幫助將不勝感激!

HTML代碼:

<table class="tablesorter" id="sales"> 
<thead> 
<tr> 
    <th class="sales header" id="th_1"><img alt="" src="name.png" id="Name" onclick="openHeaderGeneric(this)"></th> 
    <th class="sales header" id="th_2"><img alt="" src="date.png" id="Date" onclick="openHeaderGeneric(this)"></th>  
</tr> 
</thead>  
</table> 

這裏是JS:

function openHeaderGeneric(element) 
{ 
// event triggered by clicking on img (title) not header (th) 
var thId = $('#' + element.id).parent().attr('id'); 
var imageId = element.id; 
var offset = $("th#" + thId).offset(); 
var top = offset.top; 
var left = offset.left; 
// get width of td cell (+8 for padding) 
var tdWidth = thId.split('_'); 
tdWidth = tdWidth[1]; 
var width = $("td.col_" + tdWidth).width(); 
left = left + width + 8; 

$.fx.speeds._default = 1000; 

$("#" + imageId + "_wrapper").dialog( 
{ 
    autoOpen : false, 
    show : "slide", 
    hide : "slide", 
    width : "auto", 
    resizable : false, 
    modal : false, 
    position : [ left, top ] 
}); 

if (!$("#" + imageId + "_wrapper").dialog("isOpen")) 
{  
    $("#" + imageId + "_wrapper").dialog("open"); 
} 
else if ($("#" + imageId + "_wrapper").dialog("isOpen")) 
{  
    $("#" + imageId + "_wrapper").dialog("close"); 
} 

} 

回答

1
$('.header').unbind('click'); 

定義你的點擊事件之前添加此。或者,如果您只想禁用某些消息頭,使用的ID:

$('#th_1').unbind('click'); 
$('#th_2').unbind('click'); 

或者,如果你想成爲它更聰明:

jQuery.each($('.header img'), function(i, elem) { 
    if ($(elem).data('events') !== undefined && $(elem).data('events').click !== undefined) { 
    $(elem).parent().unbind('click'); 
    } 
}); 

應工作,我相信。

+0

你是對的解鎖點擊。之後,我只需要重新調用tablesorter函數。謝謝!! – Gray 2011-02-16 20:24:05