拖动表头的一个jquery插件

前些天另外一个项目组的同事让帮忙找一个能够拖动表头的js代码，要求能够像查询分析器一样的能够拖动表头，在google，baidu后发现了一个基于jquery的，源地址是：http://www.csharpwin.com/dotnetspace/12601r5144.shtml，当时我也拿来试了试，挺好用的，不过有个缺点就是使用后整个页面的表格都可以拖动了，而且还有些小bug，比如说拖动没有控制等，感觉不是很好，于是乎抽了点时间将他封装了一下，变成了一个jquery的插件，顺带学习了一下jquery插件的编写，嘿嘿！现在将这个插件分享出来。

目前的版本支持的输入参数如下：

SplitBarColor: '#000000',//表示拖动条的颜色
SplitBarWidth: '4px',//表示拖动条的宽度
SplitBarCursor: 'col-resize',//表示在可以拖动下鼠标的样式
FixedFirstColumn: false,//表示第一列是否不可拖动
AfterChange: function(e) { },//表示在拖动发生前需要执行的回调
BeginChange: function(e) { }//表示在拖动结束后需要执行的回调

其中参数e的定义如下:

var e = { sender: th, cancel: false };

sender表示当前拖动的列对象（表头）

cancel表示是否取消该事件，如果需要取消的话将e.cancel设置成true.

插件代码如下:

$.fn.ReSizeTablecolumn = function(options) { var defaultOptions = { SplitBarColor: '#000000', SplitBarWidth: '4px', SplitBarCursor: 'col-resize', FixedFirstColumn: false, AfterChange: function(e) { }, BeginChange: function(e) { } }; currTh = null; var tableWidth = parseInt($(this).css("width").replace("px", "")); var tableLeft = $(this).offset().left; var opts = $.extend(defaultOptions, options); if ($("#split_line").length == 0) { var splitBar = "<div id=/"split_line/" style="/" mce_style="/""width:" + opts.SplitBarWidth + ";height:200px;border-left:1px solid #00000000;background-color:" + opts.SplitBarColor + ";cursor:" + opts.SplitBarCursor + "; position:absolute;display:none/" ></div><input id='__tableMoveing' type='hidden' value='false' /> "; $("body").append(splitBar); $(document).bind("mousemove", function(event) { if ($("#__tableMoveing").val() == "true") { if (event.clientX < tableLeft) { return false; } if (event.clientX > tableLeft + tableWidth) { return false; } $("#split_line").css({ "left": event.clientX }).show(); return false; } }); $(document).bind("mouseup", function(event) { if ($("#__tableMoveing").val() == "true") { $("#split_line").hide(); $("#__tableMoveing").val("false"); var e = { sender: currTh, cancel: false }; opts.AfterChange(e); if (e.cancel == true) { return; } var pos = currTh.offset(); var index = currTh.prevAll().length; currTh.width(event.clientX - pos.left); currTh.parent().parent().find("tr").each(function() { $(this).children().eq(index).width(event.clientX - pos.left); }); } }); } $(this).find("th").bind("mousemove", function(event) { var th = $(this); if (opts.FixedFirstColumn && th.prevAll().length == 1) { return; } if (th.prevAll().length < 1 || th.nextAll().length < 1) { return; } var left = th.offset().left; if (event.clientX - left < 4 || (th.width() - (event.clientX - left)) < 4) { th.css({ 'cursor': 'col-resize' }); } else { th.css({ 'cursor': 'default' }); } }); $(this).find("th").bind("mousedown", function(event) { var th = $(this); if (opts.FixedFirstColumn && th.prevAll().length == 1) { return; } if (th.prevAll().length < 1 | th.nextAll().length < 1) { return; } var pos = th.offset(); if (event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left)) < 4) { var e = { sender: th, cancel: false }; opts.BeginChange(e); if (e.cancel == true) { return; } $("#__tableMoveing").val("true"); var height = th.parent().parent().height(); var top = pos.top; $("#split_line").css({ "height": height, "top": top, "left": event.clientX, "display": "" }); if (event.clientX - pos.left < th.width() / 2) { currTh = th.prev(); } else { currTh = th; } } event.stopPropagation(); }); };

使用方式如下：

$("#a").ReSizeTablecolumn(/*加可选参数*/);