table的拖拽选中区域(包含行合并和列合并的处理)-白红宇

table的拖拽选中区域(包含行合并和列合并的处理)

阅读量：5806 次

发布时间：2019-06-18

本文共 4305 字，大约阅读时间需要 14 分钟。

最近碰到一个表格的增删问题，一个主要的问题在于需要用鼠标拖拽去选中区域，然后对选中的区域进行操作。在网上找了些代码，做了个总结。原理是在鼠标刚开始点击的点和鼠标移动的点，两个点之间生成一个矩形，然后用这个矩形去和表格中的td进行碰撞检测，但是因为是表格，当然会有行合并和列合并的问题。我的思路是使用递归函数，在每一次矩形和表格碰撞完之后，重新改变矩形的定位和宽高，然后再进行碰撞检测，直到达到某个条件时，停止。我在每个和矩形块碰撞到的td上加了一个class(grayColor),然后循环遍历，需要取到4个值，最小的距离上边框的距离(offset().top)、最大的距离上边框的距离(offset().top+outerHeight())、最小的距离左边框的距离(offset().left)、最大的距离左边框的距离(offset().left+outerWidth),然后对矩形块更新，宽度为最大距离左边框的距离减去最小的距离，高度同理，top值为最小的距离上边框的值，left值同理，然后再去和table内的td去做碰撞检测，直到后一次和前一次的所有距离相等，即两次的最小距离上边框的值、最大距离上边框的值、最小距离左边框的值、最大距离左边框的值都相等时，函数停止执行。这样做的好处是，不需要去考虑colspan的值和rowspan的值，反正我找的用colspan和rowspan的做处理的，我没有看懂，毕竟，我是一只小菜鸟。下面贴上代码

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

table {

border-collapse: collapse;

}

td {

width: 200px;

height: 50px;

border: 1px solid #D9D9D9;

}

.grayColor {

background: #f2f2f2;

}

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

$('table').on('mousedown', 'td', function(e) {

$('.grayColor').removeClass('grayColor');

var startLeft = e.clientX;

var startTop = e.clientY;

var thatTd_ = $(this);

$(document).on('mousemove', function(e) {

var moveLeft = e.clientX;

var moveTop = e.clientY;

// 动态生成选择区域时占位的碰撞检测块

crashPlaceholder(moveLeft, moveTop, startLeft, startTop);

// 元素碰撞检测

elementCrash();

// 处理有表格合并之后的的选择问题通过检测高度来实现效果

formMergeChoice(moveLeft, moveTop)

});

e.stopPropagation();

})

// 鼠标抬起事件

$(document).on('mouseup', function(e) {

$(document).unbind('mousemove');

$('.show').remove();

e.stopPropagation();

});

// 生成占位块

function crashPlaceholder(A, B, C, D) {

// 开始的行列

var a = A > C ? C : A;

var b = B > D ? D : B;

$('.show').remove();

$('body').append('<div class="show"></div>');

$('.show').css('width', Math.abs(A - C)).css('height', Math.abs(B - D)).css('position', 'fixed').css('left', a).css(

'top', b).css('border', '1px dotted black');

}

// 碰撞检测

function elementCrash() {

$('table td').each(function() {

$(this).removeClass('grayColor');

// 碰撞检测

var t1 = $(this).offset().top;

var l1 = $(this).offset().left;

var r1 = $(this).offset().left + $(this).innerWidth();

var b1 = $(this).offset().top + $(this).innerHeight();

var t2 = $('.show').offset().top;

var l2 = $('.show').offset().left;

var r2 = $('.show').offset().left + $('.show').innerWidth();

var b2 = $('.show').offset().top + $('.show').innerHeight();

if (b1 < t2 || l1 > r2 || t1 > b2 || r1 < l2) {

$(this).removeClass('grayColor');

} else {

$(this).addClass('grayColor');

}

})

}

// 处理有表格合并之后的的选择问题通过检测高度来实现效果

function formMergeChoice() {

var heightArr = [],

heightArr1 = [],

widthArr = [],

widthArr1 = [];

$('.grayColor').each(function() {

heightArr.push($(this).offset().top);

heightArr1.push($(this).offset().top + $(this).outerHeight());

widthArr.push($(this).offset().left);

widthArr1.push($(this).offset().left + $(this).outerWidth());

})

var minHeight = Math.min.apply(null, heightArr);

var maxHeight = Math.max.apply(null, heightArr1);

var minWidth = Math.min.apply(null, widthArr);

var maxWidth = Math.max.apply(null, widthArr1);

$('.show').outerHeight(maxHeight - minHeight - 3).outerWidth(maxWidth - minWidth).css('top', minHeight).css('left', minWidth);

// 当改变碰撞占位检测块之后的高度和定位之后再次进行碰撞检测

elementCrash();

$('.grayColor').each(function() {

heightArr.push($(this).offset().top);

heightArr1.push($(this).offset().top + $(this).outerHeight());

widthArr.push($(this).offset().left);

widthArr1.push($(this).offset().left + $(this).outerWidth());

})

var minHeight1 = Math.min.apply(null, heightArr);

var maxHeight1 = Math.max.apply(null, heightArr1);

var minWidth1 = Math.min.apply(null, widthArr);

var maxWidth1 = Math.max.apply(null, widthArr1);

// 递归函数

if (minHeight == minHeight1 && maxHeight == maxHeight1 && minWidth == minWidth1 && maxWidth == maxWidth1) {

return;

} else {

formMergeChoice();

}

</script>

</html>

转载于:https://www.cnblogs.com/zhaotiezhu/p/9356153.html

你可能感兴趣的文章

聊一聊log4j2配置文件log4j2.xml

查看>>

NeHe OpenGL教程第七课：光照和键盘

查看>>

修改上一篇文章的node.js代码，支持默认页及支持中文

第四章 TCP粘包/拆包问题的解决之道---4.1---

spring-boot支持websocket

查看>>

菜鸟笔记(一) - Java常见的乱码问题

查看>>

我理想中的前端工作流

查看>>

记一次Git异常操作：将多个repository合并到同一repository的同一分支

查看>>

CodeIgniter 3.0 新手捣鼓源码（一） base_url()

查看>>

Chrome 广告屏蔽功能不影响浏览器性能

查看>>

vSphere 6将于2月2日全球同步发表

使用Openfiler搭建ISCSI网络存储

查看>>

应用新安全组 - 每天5分钟玩转 OpenStack（116）

查看>>