捕获表中的多个 td 元素
[英]Capturing multi td elements in the table
问题描述
I am working on implementation of selecting cells in the table.
我正在研究在表格中选择单元格的实现。
I found really good solution here:我在这里找到了非常好的解决方案：
var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.ids = []; }); app.directive('dragSelect', function($window, $document) { return { scope: { dragSelectIds: '=' }, controller: function($scope, $element) { var cls = 'eng-selected-item'; var startCell = null; var dragging = false; function mouseUp(el) { dragging = false; } function mouseDown(el) { dragging = true; setStartCell(el); setEndCell(el); } function mouseEnter(el) { if (!dragging) return; setEndCell(el); } function setStartCell(el) { startCell = el; } function setEndCell(el) { $scope.dragSelectIds = []; $element.find('td').removeClass(cls); $(cellsBetween(startCell, el)).each(function() { var el = angular.element(this); el.addClass(cls); $scope.dragSelectIds.push(el.attr('id')); }); } function rectangleSelect(selector, x1,x2, y1, y2) { var elements = []; jQuery(selector).each(function() { var $this = jQuery(this); var offset = $this.offset(); var x = offset.left; var y = offset.top; var w = $this.width(); var h = $this.height(); if (x >= x1 && x<=x2 && y>=y1 && y<=y2) { // this element fits inside the selection rectangle elements.push($this.get(0)); } }); return elements; } function cellsBetween(start, end) { var bounds = {minX:0,minY:0,maxX:0,maxY:0}; bounds.minX = $window.Math.min($(start).offset().left,$(end).offset().left); bounds.minY = $window.Math.min($(start).offset().top,$(end).offset().top); bounds.maxX = $window.Math.max($(end).offset().left+$(end).width(),$(start).offset().left+$(start).width()); bounds.maxY = $window.Math.max($(end).offset().top+$(end).height(),$(start).offset().top+$(start).height()); var initiallySelectedTds = rectangleSelect("td",bounds.minX,bounds.maxX,bounds.minY,bounds.maxY); for(var i=0;i<initiallySelectedTds.length;i++){ if($(initiallySelectedTds[i]).offset().left<bounds.minX) bounds.minX = $(initiallySelectedTds[i]).offset().left; if($(initiallySelectedTds[i]).offset().left+$(initiallySelectedTds[i]).width()>bounds.maxX) bounds.maxX = $(initiallySelectedTds[i]).offset().left+$(initiallySelectedTds[i]).width(); if($(initiallySelectedTds[i]).offset().top<bounds.minY) bounds.minY = $(initiallySelectedTds[i]).offset().top; if($(initiallySelectedTds[i]).offset().top+$(initiallySelectedTds[i]).height()>bounds.maxY) bounds.maxY = $(initiallySelectedTds[i]).offset().top+$(initiallySelectedTds[i]).height(); } return rectangleSelect("td",bounds.minX,bounds.maxX,bounds.minY,bounds.maxY); } function wrap(fn) { return function() { var el = angular.element(this); $scope.$apply(function() { fn(el); }); } } $element.delegate('td', 'mousedown', wrap(mouseDown)); $element.delegate('td', 'mouseenter', wrap(mouseEnter)); $document.delegate('body', 'mouseup', wrap(mouseUp)); } } });
[drag-select] { cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } [drag-select] .eng-selected-item { background: blue; color: white; } td { padding: 10px; border: 1px solid gray; }
<!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <table drag-select drag-select-ids="ids"> <tr> <td id="td-1-1">1-1</td> <td id="td-1-2">1-2</td> <td id="td-1-3">1-3</td> <td id="td-1-4">1-4</td> <td id="td-1-5">1-5</td> <td id="td-1-6">1-6</td> <td id="td-1-7">1-7</td> <td id="td-1-8">1-8</td> <td id="td-1-9">1-9</td> <td id="td-1-10">1-10</td> </tr> <tr> <td id="td-2-1">2-1</td> <td id="td-2-2">2-2</td> <td id="td-2-3">2-3</td> <td id="td-2-4">2-4</td> <td id="td-2-5">2-5</td> <td id="td-2-6">2-6</td> <td id="td-2-7">2-7</td> <td id="td-2-8">2-8</td> <td id="td-2-9">2-9</td> <td id="td-2-10">2-10</td> </tr> <tr> <td id="td-3-1">3-1</td> <td id="td-3-2">3-2</td> <td id="td-3-3">3-3</td> <td id="td-3-4">3-4</td> <td id="td-3-5">3-5</td> <td id="td-3-6">3-6</td> <td id="td-3-7">3-7</td> <td id="td-3-8">3-8</td> <td id="td-3-9">3-9</td> <td id="td-3-10">3-10</td> </tr> <tr> <td id="td-4-1">4-1</td> <td id="td-4-2">4-2</td> <td id="td-4-3">4-3</td> <td id="td-4-4">4-4</td> <td id="td-4-5">4-5</td> <td id="td-4-6">4-6</td> <td id="td-4-7">4-7</td> <td id="td-4-8">4-8</td> <td id="td-4-9">4-9</td> <td id="td-4-10">4-10</td> </tr> <tr> <td id="td-5-1">5-1</td> <td id="td-5-2">5-2</td> <td id="td-5-3">5-3</td> <td id="td-5-4">5-4</td> <td id="td-5-5">5-5</td> <td id="td-5-6">5-6</td> <td id="td-5-7">5-7</td> <td id="td-5-8">5-8</td> <td id="td-5-9">5-9</td> <td id="td-5-10">5-10</td> </tr> </table> <p>Selected IDs: {{ids | json}}</p> </body> </html>
The cell selection works great.单元格选择效果很好。 After the selection, I want to be able to select more cells, without the previous ones disappearing and also be able to deselect the already selected one.选择后，我希望能够选择更多的单元格，而不会让以前的单元格消失，并且还可以取消选择已经选择的单元格。
Now basically every time I click into the table, previous selection disappears and the new one start.现在基本上每次我点击表格时，以前的选择都会消失，新的选择会开始。
Does anyone have any idea, how I could implement this?有没有人有任何想法，我该如何实现？
1 个解决方案
解决方案1
2 已采纳 2018-11-12 11:05:02
Just modify you setEndCell function like,只需修改您的setEndCell function例如，
function mouseEnter(el) {
if (!dragging) return;
setEndCell(el);
}
function setEndCell(el) {
if (el.hasClass(cls)) { // if added then remove on click
el.removeClass(cls);
var elIndex = $scope.dragSelectIds.indexOf(el[0].id);
elIndex !==-1 && $scope.dragSelectIds.splice(elIndex, 1)
return false;
}
if (!$scope.dragSelectIds) {
$scope.dragSelectIds = [];
}
//$element.find('td').removeClass(cls);
$(cellsBetween(startCell, el)).each(function() {
var el = angular.element(this);
el.addClass(cls);
// change if added, then not to add twice.
var elIndex = $scope.dragSelectIds.indexOf(el[0].id);
elIndex ===-1 && $scope.dragSelectIds.push(el.attr('id'));
});
}
var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.ids = []; }); app.directive('dragSelect', function($window, $document) { return { scope: { dragSelectIds: '=' }, controller: function($scope, $element) { var cls = 'eng-selected-item'; var startCell = null; var dragging = false; function mouseUp(el) { dragging = false; } function mouseDown(el) { dragging = true; setStartCell(el); setEndCell(el); } function mouseEnter(el) { if (!dragging) return; setEndCell(el); } function setStartCell(el) { startCell = el; } function setEndCell(el) { if (el.hasClass(cls)) { el.removeClass(cls); var elIndex = $scope.dragSelectIds.indexOf(el[0].id); elIndex !==-1 && $scope.dragSelectIds.splice(elIndex, 1) return false; } if (!$scope.dragSelectIds) { $scope.dragSelectIds = []; } //$element.find('td').removeClass(cls); $(cellsBetween(startCell, el)).each(function() { var el = angular.element(this); el.addClass(cls); var elIndex = $scope.dragSelectIds.indexOf(el[0].id); elIndex ===-1 && $scope.dragSelectIds.push(el.attr('id')); }); } function rectangleSelect(selector, x1, x2, y1, y2) { var elements = []; jQuery(selector).each(function() { var $this = jQuery(this); var offset = $this.offset(); var x = offset.left; var y = offset.top; var w = $this.width(); var h = $this.height(); if (x >= x1 && x <= x2 && y >= y1 && y <= y2) { // this element fits inside the selection rectangle elements.push($this.get(0)); } }); return elements; } function cellsBetween(start, end) { var bounds = { minX: 0, minY: 0, maxX: 0, maxY: 0 }; bounds.minX = $window.Math.min($(start).offset().left, $(end).offset().left); bounds.minY = $window.Math.min($(start).offset().top, $(end).offset().top); bounds.maxX = $window.Math.max($(end).offset().left + $(end).width(), $(start).offset().left + $(start).width()); bounds.maxY = $window.Math.max($(end).offset().top + $(end).height(), $(start).offset().top + $(start).height()); var initiallySelectedTds = rectangleSelect("td", bounds.minX, bounds.maxX, bounds.minY, bounds.maxY); for (var i = 0; i < initiallySelectedTds.length; i++) { if ($(initiallySelectedTds[i]).offset().left < bounds.minX) bounds.minX = $(initiallySelectedTds[i]).offset().left; if ($(initiallySelectedTds[i]).offset().left + $(initiallySelectedTds[i]).width() > bounds.maxX) bounds.maxX = $(initiallySelectedTds[i]).offset().left + $(initiallySelectedTds[i]).width(); if ($(initiallySelectedTds[i]).offset().top < bounds.minY) bounds.minY = $(initiallySelectedTds[i]).offset().top; if ($(initiallySelectedTds[i]).offset().top + $(initiallySelectedTds[i]).height() > bounds.maxY) bounds.maxY = $(initiallySelectedTds[i]).offset().top + $(initiallySelectedTds[i]).height(); } return rectangleSelect("td", bounds.minX, bounds.maxX, bounds.minY, bounds.maxY); } function wrap(fn) { return function() { var el = angular.element(this); $scope.$apply(function() { fn(el); }); } } $element.delegate('td', 'mousedown', wrap(mouseDown)); $element.delegate('td', 'mouseenter', wrap(mouseEnter)); $document.delegate('body', 'mouseup', wrap(mouseUp)); } } });
[drag-select] { cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } [drag-select] .eng-selected-item { background: blue; color: white; } td { padding: 10px; border: 1px solid gray; }
<!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script> document.write('<base href="' + document.location + '" />'); </script> <link rel="stylesheet" href="style.css" /> <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <table drag-select drag-select-ids="ids"> <tr> <td id="td-1-1">1-1</td> <td id="td-1-2">1-2</td> <td id="td-1-3">1-3</td> <td id="td-1-4">1-4</td> <td id="td-1-5">1-5</td> <td id="td-1-6">1-6</td> <td id="td-1-7">1-7</td> <td id="td-1-8">1-8</td> <td id="td-1-9">1-9</td> <td id="td-1-10">1-10</td> </tr> <tr> <td id="td-2-1">2-1</td> <td id="td-2-2">2-2</td> <td id="td-2-3">2-3</td> <td id="td-2-4">2-4</td> <td id="td-2-5">2-5</td> <td id="td-2-6">2-6</td> <td id="td-2-7">2-7</td> <td id="td-2-8">2-8</td> <td id="td-2-9">2-9</td> <td id="td-2-10">2-10</td> </tr> <tr> <td id="td-3-1">3-1</td> <td id="td-3-2">3-2</td> <td id="td-3-3">3-3</td> <td id="td-3-4">3-4</td> <td id="td-3-5">3-5</td> <td id="td-3-6">3-6</td> <td id="td-3-7">3-7</td> <td id="td-3-8">3-8</td> <td id="td-3-9">3-9</td> <td id="td-3-10">3-10</td> </tr> <tr> <td id="td-4-1">4-1</td> <td id="td-4-2">4-2</td> <td id="td-4-3">4-3</td> <td id="td-4-4">4-4</td> <td id="td-4-5">4-5</td> <td id="td-4-6">4-6</td> <td id="td-4-7">4-7</td> <td id="td-4-8">4-8</td> <td id="td-4-9">4-9</td> <td id="td-4-10">4-10</td> </tr> <tr> <td id="td-5-1">5-1</td> <td id="td-5-2">5-2</td> <td id="td-5-3">5-3</td> <td id="td-5-4">5-4</td> <td id="td-5-5">5-5</td> <td id="td-5-6">5-6</td> <td id="td-5-7">5-7</td> <td id="td-5-8">5-8</td> <td id="td-5-9">5-9</td> <td id="td-5-10">5-10</td> </tr> </table> <p>Selected IDs: {{ids | json}}</p> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
jQuery捕获表的每一行的最后一个td - jQuery capturing last td of every row of a table
使用 JavaScript 将 2 个 TD 元素添加到表中 - Adding 2 TD elements to a table using JavaScript
使用javascript交换表的td元素 - Swapping td elements of table using javascript
在javascript中限制选择表的td元素 - Restricted selecting td elements of a table in javascript
将对象数组作为元素添加到现有表 td - Add array of objects as elements to existing table td
从具有ID的td中查找表中的元素 - Find elements in a table from a td that has an id
HTML表格中TD元素的溢出属性 - Overflow property on TD elements in an HTML Table
基于元素数组动态填充表td - Dynamicaly fill table td based on array of elements
jQuery在表td中显示和隐藏元素 - jQuery show & hide elements in table td
使 HTML 表格的 td 元素成为下拉菜单 - Make td elements of an HTML table a dropdown menu
相关标签