Kesan lebar lajur seret jadual JQuery (ditulis oleh saya sendiri)_jquery

Sama seperti kesan menyeret pengepala jadual dalam program desktop, apabila tetikus kekal pada garis sempadan pengepala, tetikus akan berubah menjadi bentuk yang menunjukkan penyeretan ke kiri dan ke kanan, dan garisan akan muncul dalam jadual Garis menegak bergerak dengan tetikus Akhirnya, apabila tetikus dilepaskan, lebar lajur jadual akan dilaraskan. Saya telah bebas baru-baru ini, jadi saya cuba melaksanakannya sendiri, dan saya ingin berkongsi hasil kecil di sini.

Mula-mula anda memerlukan fail ikon tetikus seperti yang ditunjukkan dalam gambar Cari *.cur dalam cakera keras anda dan anda pasti akan menemuinya.

Untuk dapat menggunakan kesan ini pada semua halaman tanpa mengubah sebarang HTML pada halaman, saya menyepadukan semua kod dalam $(document).ready(function() {} dan menulis fail JS yang berasingan.

Gunakan DIV selebar 1 piksel untuk mensimulasikan garis menegak dan tambahkannya pada elemen badan selepas halaman dimuatkan

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

Langkah seterusnya ialah masalah ubah bentuk tetikus apabila tetikus bergerak ke sempadan menegak jadual Pada mulanya saya mempertimbangkan untuk menambah elemen tahap blok kecil dalam pengepala jadual untuk mencetuskan peristiwa pergerakan tetikus dan keluar tetikus. demi kesederhanaan, saya memilih untuk menukar pergerakan tetikus untuk keseluruhan jadual.

Kendalikan transformasi tetikus dalam acara mousemove TH:

$("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' });
}
});

Apabila tetikus ditekan, garis menegak dipaparkan, dan sifat CSS ketinggian dan kedudukannya ditetapkan Pada masa yang sama, objek TH yang pada masa ini ingin menukar lebar lajur direkodkan kerana garis sempadan dikongsi oleh dua TH, yang sebelumnya sentiasa diambil di sini.

$("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;
}
}
});

Seterusnya ialah kesan garis menegak yang bergerak apabila tetikus bergerak, kerana ia perlu mempunyai kesan ini apabila tetikus meninggalkan elemen TH Kesan ini ditulis dalam fungsi mousemove elemen BODY

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

Yang terakhir ialah kesan pelarasan lebar lajur terakhir apabila tetikus melantun ke atas. Di sini saya menambah kod mouseup yang sama pada elemen BODY dan TH. Saya pada asalnya berpendapat bahawa saya hanya perlu menambah fungsi mouseup ke BODY, tetapi saya tidak faham mengapa peristiwa itu tidak dicetuskan apabila tetikus berada di TH, jadi saya terpaksa menambah kod pada elemen TH. Tahap saya terhad, dan saya tidak tahu cara mengekstrak kod yang diulang sepenuhnya di bawah.

$("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);
});
}
});

Baiklah, selagi anda memperkenalkan fail JS yang mengandungi kod di atas ke dalam halaman yang memerlukan kesan ini, anda boleh menambah kesan ini pada jadual pada halaman tersebut.

Selain itu, kod di atas tidak mempunyai kesan apabila menyesuaikan ikon tetikus dalam Firefox Jquery yang digunakan ialah 1.2.6

Muat turun fail kesan