JQuery表格插件：鼠标移过变色，双击打开新页面，单选（支持多选）变色
17号那天，一直在长安街上堵着，正好有时间来写一点文章。现在在做一个工程项目管理平台，里面的列表项使用Repeater来生成表格。查到网上的日志的方法，使用直接改变背景色，我修改了一下，直接调用class，来看代码：
/*
2009-7-3修改
作者：Allen
版权没有，随便使用
参考自tablegrid和tableresizer
功能
1，奇偶行不同色，鼠标滑过颜色效果，点击高亮
2，列宽可拖动
3，双击事件，在每行第一列取a的href值
修改者：Ranran QQ:30152716 2010-9-19
1，增加可以多选、单选选项
2，引入CSS样式
3，兼容jquery1.4.1
不足：调整列宽不太好请大家指教（本打算改成在每一行都可以调整的，类似flexigrid）
*/
(function ($) {
$.fn.rTable = function (options) {
$.fn.rTable.defaults = {
MutiSelect: false,
useDblClick: false,
col_border : ""
};
var opts = $.extend({}, $.fn.rTable.defaults, options);
//拖动列宽
var resize_columns = function (root) {
var tbl = root.children("table"); //找到table
var tr = tbl.find("tr:first"); //找到第一行
var header, newwidth;
var resize = false;
root.width(tbl.width()); //table的宽度
tr.children("th").css("border-right", opts.col_border); //给第一行的th加上一个css
var left_pos = root.offset().left;
endresize = function () {
if (resize == true && header != null) {
document.onselectstart = new Function("return true");
resize = false;
root.children("table").css("cursor", "");
}
};
tbl.mousemove(function (e) {
var left = (e.clientX - left_pos) + document.body.scrollLeft;
if (resize) {
var width = left - (header.offset().left - left_pos)
- parseInt(header.css("padding-left"))
- parseInt(header.css("padding-right"));
if (width > 1) {
var current_width = header.width();
if (width > current_width) {
var total = root.width() + ((width - header.width()));
root.width(total);
header.width(width);
}
else {
header.width(width);
if (header.width() == width) {
var total = root.width() + ((width - current_width));
root.width(total);
}
}
newwidth = width;
}
}
else {
if (e.target.nodeName == "TH") {
var tgt = $(e.target);
var dosize = (left - (tgt.offset().left - left_pos)
> tgt.width() - 4);
$(this).css("cursor", dosize ? "col-resize" : "");
}
}
});
tbl.mouseup(function (e) {
endresize();
});
tbl.bind("mouseleave", function (e) {
endresize();
return false;
});
tr.mousedown(function (e) {
if (e.target.nodeName == "TH"
&& $(this).css("cursor") == "col-resize") {
header = $(e.target);
resize = true;
document.onselectstart = new Function("return false");
}
return false;
});
tr.bind('mouseleave', function (e) {
if (!resize)
root.children("table").css("cursor", "");
});
};
return this.each(function () {
var root = $(this).wrap("<div class='gvHeader' />").parent();
resize_columns(root);
//奇偶行上色
$(this).find('tr:odd').toggleClass('alt-data-row');
$(this).find('tr:even').toggleClass('data-row');
$(this).find('tr').each(function () {
//--------------------------------------this为tr------------------------------------------
// this.origColor = $(this).find('td').css('backgroundColor'); //未点击时的颜色
// this.clicked = false; //初始状态,设置bool变量clicked,以click事件触发此变量的true or false
$(this).click(function (e) { //此处的this是tr
var obj = (e.target || e.srcElement);
if (obj.href || obj.type) return true;
if ($(this).hasClass('row-select')) {
//如果已经选择的，就移除选择（好像不如不移除好看）
$(this).removeClass('row-select');
}
else {
$(this).removeClass('row-over');
$(this).toggleClass('row-select');
if (!opts.MutiSelect) {
$(this).siblings().removeClass('row-select');
}
}
});
//鼠标滑过及滑出事件
$(this).mouseover(function () {
if (!$(this).hasClass('row-select')) {
$(this).toggleClass('row-over');
}
});
$(this).mouseout(function () {
$(this).removeClass('row-over');
});
//双击事件
if (opts.useDblClick) {
var urls = $(this).children("td:first-child").find("a").attr("href");
$(this).dblclick(function () {
window.open(urls, '详细情况', 'height=540,width=1020,top=10,left=10,toolbar=no,menubar=no,scrollbars=yes, resizable=yes,location=no, status=no')
});
}
});
});
};
})(jQuery);
调用方法（注意，使用时要加上自定义的CSS文件，我用的是我自己的http://www.vfish.info/二次开发时用的CSS样式）：
<script type="text/javascript">
$(document).ready(function () {
$("#data").rTable();
})
</script>
在下一篇我将以这个站http://www.vfish.info/为例，讲一讲，有限的已知数据的多样性表现（不知道我表达清楚没有）
完整例子可向我要。
请大家支持我一下，谢谢！
不明白为什么有人反对 。。。。
