我有一个使用 tablesorter 插件的大表格(24 列),为了节省一些空间,我使用垂直图像来显示标题中的标题。
我有一个点击事件附加到一些选定的图像,这将在被点击的标题标题旁边打开第二个表(通过 jQuery 对话框)。我遇到的问题是,当我单击图像时,表排序器也会对列进行排序(我不希望发生这种情况),所以我试图找到一种方法以某种方式禁用排序,但只有当我点击标题图片。
任何帮助将不胜感激!
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");
}
}
最佳答案
$('.header').unbind('click');
在定义点击事件之前添加此内容。或者,如果您只想对某些 header 禁用它,请使用 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');
}
});
我相信应该可以工作。
关于jQuery tablesorter 插件 - 禁用标题内图像的排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5008874/