JQuery拖曳表頭邊框線調整表格列寬效果代碼_jquery

類似桌面程式中的表格拖曳表頭的效果，當滑鼠停留在表頭邊框線上時，滑鼠會變成表示左右拖曳的形狀，接著拖曳滑鼠，會在表格中出現一條隨滑鼠移動的垂直線，最後放開滑鼠，表格列寬會被調整。最近比較空閒，便自己動手嘗試實現，在此分享下小小的成果。

首先需要如圖所示的滑鼠圖示文件，在自己的硬碟中搜尋*.cur，肯定能找到。

為了能在所有需要該效果的頁面使用，並且不需要更改頁面任何HTML，我把所有的程式碼整合在$(document).ready(function() {}); 中，並寫入一個獨立的JS檔。

用一個1像素寬的DIV來模擬一條垂直線，在頁面載入後加入body元素

$(document).ready(function() {
$("body").append("<div id=\"line\" style=\"width:1px;height:200px;border-left:1px solid #00000000; position:absolute;display:none\" ></div> ");
});

接下來是滑鼠移動到表格縱向邊框上滑鼠變型的問題，起初我考慮在表頭中添加一個很小的區塊級元素觸發mousemove 和mouseout事件，但為了簡單起見，我還是選擇為整個表頭添加該事件。

在TH的mousemove事件中處理滑鼠變型：

$("th").bind("mousemove", function(event) {
var th = $(this);
//不给第一列和最后一列添加效果
if (th.prevAll().length <= 1 || th.nextAll().length < 1) {
return;
}
var left = th.offset().left;
//距离表头边框线左右4像素才触发效果
if (event.clientX - left < 4 || (th.width() - (event.clientX - left)) < 4) {
th.css({ 'cursor': '/web/Page/frameset/images/splith.cur' });
//修改为你的鼠标图标路径
}
else {
th.css({ 'cursor': 'default' });
}
});

當滑鼠按下時，顯示垂直線，並設定它的高度，位置CSS屬性，同時記錄當前要改變列寬的TH對象，因為一條邊框線由兩個TH共享，這裡總是取前一個TH對象。

$("th").bind("mousedown", function(event) {
var th = $(this);
//与mousemove函数中同样的判断
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 height = th.parent().parent().height();
var top = pos.top;
$("#line").css({ "height": height, "top": top,"left":event .clientX,"display":"" });
//全局变量，代表当前是否处于调整列宽状态
lineMove = true;
//总是取前一个TH对象
if (event.clientX - pos.left < th.width() / 2) {
currTh = th.prev();
}
else {
currTh = th;
}
}
});

接下來是滑鼠移動時，垂直線隨之移動的效果，因為需要當滑鼠離開TH元素也要能有該效果，該效果寫在BODY元素的mousemove函數中

$("body").bind("mousemove", function(event) {
if (lineMove == true) {
$("#line").css({ "left": event.clientX }).show();
}
});

最後是滑鼠彈起時，最後的調整列寬效果。這裡我為BODY 和TH兩個元素添加了相同的mouseup程式碼。我原先以為我只需要給BODY添加mouseup函數，但不明白為什麼滑鼠在TH中時，事件沒有觸發，我只好為TH元素也添加了程式碼。水平有限，下面完全重複的程式碼不知道怎麼抽出來。

$("body").bind("mouseup", function(event) {
if (lineMove == true) {
$("#line").hide();
lineMove = false;
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);
});
}
});
$("th").bind("mouseup", function(event) {
if (lineMove == true) {
$("#line").hide();
lineMove = false;
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);
});
}
});

好了，只要在需要這個效果的頁面中引入包含以上程式碼的JS文件，就可以為頁面中表格添加該效果。

另外以上程式碼在火狐中自訂滑鼠圖示的程式碼沒出效果，所用的jquery為1.2.6

效果檔下載

————————————————————————更新——————————————

關於拖曳時會選取內容的BUG，將以下一行程式碼加入$(document).ready函數裡就行了

$("body").bind("selectstart", function() { return !lineMove; });