JQuery 表格拖動調整列寬效果

原創

smeyou

2020-02-21 17:06

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

　　首先需要如圖所示的鼠標圖標文件，在自己的硬盤中搜索*.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);

        });

    }

});