JQuery faites glisser la ligne de bordure de l'en-tête du tableau pour ajuster l'effet de largeur de colonne du tableau code_jquery

Semblable à l'effet de faire glisser l'en-tête d'un tableau dans un programme de bureau, lorsque la souris reste sur la ligne de bordure de l'en-tête, la souris prend une forme indiquant un glissement vers la gauche et la droite. Ensuite, faites glisser la souris, et. une ligne apparaîtra dans le tableau. La ligne verticale se déplace avec la souris Enfin, lorsque la souris est relâchée, la largeur des colonnes du tableau sera ajustée. J'ai été libre récemment, j'ai donc essayé de l'implémenter moi-même et j'aimerais partager les petits résultats ici.

Vous avez d'abord besoin du fichier d'icône de la souris comme indiqué sur l'image. Recherchez *.cur sur votre disque dur et vous le trouverez certainement.

Afin de pouvoir utiliser cet effet sur toutes les pages sans modifier le code HTML de la page, j'ai intégré tout le code dans $(document).ready(function() {}); et j'ai écrit un fichier JS séparé.

Utilisez un DIV de 1 pixel de large pour simuler une ligne verticale et ajoutez-le à l'élément body après le chargement de la page

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

L'étape suivante est le problème de la déformation de la souris lorsque la souris se déplace vers la bordure verticale du tableau. Au début, j'ai envisagé d'ajouter un petit élément de niveau bloc dans l'en-tête du tableau pour déclencher les événements mousemove et mouseout, mais pour le par souci de simplicité, j'ai choisi de modifier le mouvement de la souris pour l'ensemble du tableau. Ajoutez cet événement à l'en-tête.

Gérer les transformations de la souris dans l'événement mousemove de 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' });
}
});

Lorsque la souris est enfoncée, la ligne verticale est affichée et ses propriétés CSS de hauteur et de position sont définies. En même temps, l'objet TH qui souhaite actuellement modifier la largeur de la colonne est enregistré car une ligne de bordure est partagée. par deux TH, le précédent est toujours pris ici objet 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;
}
}
});

Vient ensuite l'effet du déplacement de la ligne verticale lorsque la souris bouge, car elle doit avoir cet effet lorsque la souris quitte l'élément TH. Cet effet est écrit dans la fonction mousemove de l'élément BODY

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

Le dernier est l'effet final d'ajustement de la largeur des colonnes lorsque la souris rebondit. Ici, j'ai ajouté le même code mouseup aux éléments BODY et TH. Au départ, je pensais que je devais seulement ajouter la fonction mouseup à BODY, mais je ne comprenais pas pourquoi l'événement n'était pas déclenché lorsque la souris était en TH, j'ai donc dû ajouter du code à l'élément TH. Mon niveau est limité, et je ne sais pas comment extraire le code entièrement répété ci-dessous.

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

D'accord, tant que vous introduisez le fichier JS contenant le code ci-dessus dans la page qui a besoin de cet effet, vous pouvez ajouter cet effet au tableau de la page.

De plus, le code ci-dessus n'a aucun effet lors de la personnalisation de l'icône de la souris dans Firefox. Le jquery utilisé est 1.2.6

Téléchargement du fichier d'effet

——————————————————————Mise à jour———————————————

Concernant le bug de sélection de contenu lors du glisser, il suffit d'ajouter la ligne de code suivante à la fonction $(document).ready

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