JQuery 테이블 드래그 조정 열 너비 효과(직접 작성)_jquery

데스크톱 프로그램에서 표의 머리글을 드래그하는 것과 유사하게 머리글의 경계선에 마우스를 놓으면 마우스가 좌우로 드래그하는 모양으로 바뀌게 됩니다. 그런 다음 마우스를 드래그합니다. 표에 선이 나타납니다. 마우스를 놓으면 수직선이 이동합니다. 마지막으로, 표 열 너비가 조정됩니다. 최근에 여유가 생겨서 직접 구현해 보았는데, 소소한 결과를 여기에 공유하고자 합니다.

먼저 그림과 같은 마우스 아이콘 파일이 필요합니다. 하드 드라이브에서 *.cur를 검색하면 확실히 찾을 수 있습니다.

페이지의 HTML을 변경하지 않고도 모든 페이지에서 이 효과를 사용할 수 있도록 $(document).ready(function() {});에 모든 코드를 통합하고 별도의 JS 파일을 작성했습니다.

1픽셀 너비의 DIV를 사용하여 수직선을 시뮬레이션하고 페이지 로드 후 본문 요소에 추가합니다.

$(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 파일을 이 효과가 필요한 페이지에 삽입하기만 하면 이 효과를 페이지의 테이블에 추가할 수 있습니다.

또한 위 코드는 Firefox에서 마우스 아이콘을 맞춤설정할 때 아무런 효과가 없습니다. 사용된 jquery는 1.2.6입니다

효과 파일 다운로드