JQuery-Tabellen-Drag-Anpassungs-Spaltenbreiteneffekt (von mir selbst geschrieben)_jquery

Ähnlich wie beim Ziehen der Kopfzeile einer Tabelle in einem Desktop-Programm verändert sich die Maus, wenn sie auf der Randlinie der Kopfzeile bleibt, in eine Form, die das Ziehen nach links und rechts anzeigt. Ziehen Sie dann die Maus und In der Tabelle wird eine Linie angezeigt. Wenn Sie die Maus loslassen, wird die Spaltenbreite der Tabelle angepasst. Ich war in letzter Zeit frei, also habe ich versucht, es selbst umzusetzen, und ich möchte die kleinen Ergebnisse hier teilen.

Zuerst benötigen Sie die Maussymboldatei, wie im Bild gezeigt. Suchen Sie auf Ihrer Festplatte nach *.cur und Sie werden sie auf jeden Fall finden.

Um diesen Effekt auf allen Seiten nutzen zu können, ohne HTML auf der Seite zu ändern, habe ich den gesamten Code in $(document).ready(function() {}); integriert und eine separate JS-Datei geschrieben.

Verwenden Sie ein 1 Pixel breites DIV, um eine vertikale Linie zu simulieren und fügen Sie sie dem Body-Element hinzu, nachdem die Seite geladen wurde

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

Der nächste Schritt ist das Problem der Mausverformung, wenn sich die Maus zum vertikalen Rand der Tabelle bewegt. Zuerst habe ich darüber nachgedacht, ein kleines Element auf Blockebene in den Tabellenkopf einzufügen, um die Ereignisse „Mousemove“ und „Mouseout“ auszulösen Der Einfachheit halber habe ich mich dafür entschieden, die Mausbewegung für die gesamte Tabelle zu ändern. Fügen Sie dieses Ereignis zur Kopfzeile hinzu.

Behandeln Sie Maustransformationen im Mousemove-Ereignis von 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' });
}
});

Wenn die Maus gedrückt wird, wird die vertikale Linie angezeigt und ihre CSS-Eigenschaften für Höhe und Position festgelegt. Gleichzeitig wird das TH-Objekt aufgezeichnet, das derzeit die Spaltenbreite ändern möchte Bei zwei THs wird hier immer das vorherige TH-Objekt übernommen.

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

Als nächstes folgt der Effekt der Bewegung der vertikalen Linie, wenn sich die Maus bewegt, da sie diesen Effekt haben muss, wenn die Maus das TH-Element verlässt. Dieser Effekt wird in die Mousemove-Funktion des BODY-Elements geschrieben

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

Der letzte Effekt ist die endgültige Anpassung der Spaltenbreite, wenn die Maus nach oben springt. Hier habe ich den BODY- und TH-Elementen den gleichen Mouseup-Code hinzugefügt. Ich dachte ursprünglich, dass ich nur die Mouseup-Funktion zu BODY hinzufügen müsste, aber ich verstand nicht, warum das Ereignis nicht ausgelöst wurde, wenn sich die Maus in TH befand, also musste ich Code zum TH-Element hinzufügen. Mein Level ist begrenzt und ich weiß nicht, wie ich den vollständig wiederholten Code unten extrahieren kann.

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

Okay, solange Sie die JS-Datei mit dem obigen Code in die Seite einfügen, die diesen Effekt benötigt, können Sie diesen Effekt zur Tabelle auf der Seite hinzufügen.

Außerdem hat der obige Code keine Auswirkung beim Anpassen des Maussymbols in Firefox. Die verwendete JQuery ist 1.2.6

Effektdatei-Download