1
例如，当用户通过将鼠标从第一个单元格拖到另一个单元格来选择表格行中的某些单元格时，我需要获取表格单元格中隐藏的输入值。我如何在AngularJS中做到这一点？为了更好地理解如何突出显示AngularJS中的选定表格单元格？
见图片：http://screencast.com/t/m3hcN11leTh
A
回答
1
如果你还在寻找一个答案，我制定了一个表中的多小区选择一个角度指令。你可以在
找到它在你的脚本中;
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.ids = [];
$scope.rowTable = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
$scope.colTable = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
});
app.directive('multiCellSelect', function($window, $document) {
return {
scope: {
multiCellIds: '='
},
controller: function($scope, $element) {
var clearFlag = false;
var startCell = null;
var dragging = false;
var finalCell = null;
function mouseDown(el) {
dragging = true;
setStartCell(el);
setRangeArea(startCell, el)
}
function mouseUp(el) {
dragging = false;
finalCell = el;
setSelectedCells(startCell, finalCell);
if (clearFlag) {
clearCells(startCell, finalCell);
clearFlag = false;
}
startCell = null;
}
function mouseLeave(el) {
if (dragging) {
if (el.hasClass('hover-area')) {
cellsBetween(startCell, el).each(function() {
var el = angular.element(this);
el.toggleClass('hover-area').addClass('ui-state-default')
});
if (startCell == el) {
el.toggleClass('hover-area').addClass('ui-state-default')
}
}
} else {
return;
}
}
function mouseEnter(el) {
if (!dragging) {
return;
} else {
setRangeArea(startCell, el);
}
}
function setStartCell(el) {
startCell = el;
}
function setRangeArea(start, el) {
if (dragging) {
if (el.hasClass('ui-state-default')) {
cellsBetween(startCell, el).each(function() {
var el = angular.element(this);
el.addClass('hover-area')
});
} else if (el.hasClass('hover-area') || el.hasClass('ui-state-default')) {
cellsBetween(startCell, el).each(function() {
var el = angular.element(this);
el.toggleClass('hover-area').addClass('ui-state-default');
});
}
if (!start.hasClass('eng-selected-item')) {
cellsBetween(startCell, el).each(function() {
var el = angular.element(this);
if (el.hasClass('eng-selected-item')) {
clearFlag = true;
}
});
}
}
}
function setSelectedCells(start, end) {
if (start && end) {
cellsBetween(start, end).each(function() {
var el = angular.element(this);
if (el.hasClass('eng-selected-item') && el.hasClass('hover-area')) {
el.removeClass('eng-selected-item');
el.removeClass('hover-area')
var id = el.attr('id');
var index = $scope.multiCellIds.indexOf(id);
if ($scope.multiCellIds.indexOf(el.attr('id')) > -1) {
$scope.multiCellIds.splice(index, 1);
}
} else if (el.hasClass('hover-area') && !el.hasClass('eng-selected-item')) {
el.addClass('eng-selected-item');
el.removeClass('hover-area')
if ($scope.multiCellIds.indexOf(el.attr('id')) == -1) {
$scope.multiCellIds.push(el.attr('id'));
}
}
});
}
}
function clearCells(start, end) {
cellsBetween(start, end).each(function() {
var el = angular.element(this);
el.removeClass('eng-selected-item');
el.removeClass('hover-area');
var id = el.attr('id');
var index = $scope.multiCellIds.indexOf(id);
if ($scope.multiCellIds.indexOf(el.attr('id')) > -1) {
$scope.multiCellIds.splice(index, 1);
}
});
}
function cellsBetween(start, end) {
var coordsStart = getCoords(start);
var coordsEnd = getCoords(end);
var topLeft = {
column: $window.Math.min(coordsStart.column, coordsEnd.column),
row: $window.Math.min(coordsStart.row, coordsEnd.row),
};
var bottomRight = {
column: $window.Math.max(coordsStart.column, coordsEnd.column),
row: $window.Math.max(coordsStart.row, coordsEnd.row),
};
return $element.find('td').filter(function() {
var el = angular.element(this);
var coords = getCoords(el);
return coords.column >= topLeft.column && coords.column <= bottomRight.column && coords.row >= topLeft.row && coords.row <= bottomRight.row;
});
}
function getCoords(cell) {
var row = cell.parents('row');
return {
column: cell[0].cellIndex,
row: cell.parent()[0].rowIndex
};
}
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));
$element.delegate('td', 'mouseleave', wrap(mouseLeave));
$element.delegate('td', 'mouseup', wrap(mouseUp));
}
}
});
在您的html;
<body ng-app="myApp">
<div ng-controller="MainCtrl">
<h1>
<i>Multi Cell Selection by Zerocool27</i>
</h1>
<table ng-table="idTable" class="table table-striped" multi-cell-select multi-cell-ids="ids">
<tr>
<th colspan="1">Days</th>
<th colspan="2" ng-repeat="col in colTable">{{col}}
</tr>
<tr ng-repeat="row in rowTable">
<th>{{row}}</th>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-0"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-1"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-2"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-3"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-4"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-5"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-6"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-7"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-8"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-9"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-10"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-11"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-12"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-13"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-14"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-15"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-16"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-17"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-18"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-19"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-20"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-21"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-22"></td>
<td colspan="2" style="effect" class="ui-state-default" id="{{row}}-23"></td>
</tr>
</table>
<div style="margin-top:20px;">
<i>Selected Cells : </i>
<span ng-repeat="id in ids">
<i>{{id}}</i>
</span>
</div>
</div>
</body>
您的CSS;
td {
border: 0px solid black;
}
td:hover {
background: #8deaed;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#8deaed), to(#9fedf0));
background: -moz-linear-gradient(#8deaed, #9fedf0);
background: linear-gradient(#8deaed, #9fedf0);
box-shadow: inset 0 0 0 1px #b9f2f5;
}
td,
th {
width: 30px;
text-align: center;
font-weight: normal;
color: #858584;
}
[multi-cell-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;
}
[multi-cell-select] .eng-selected-item {
background: #007AFF;
color: white;
border-bottom-color: #007AFF;
border: #007AFF;
}
[multi-cell-select] .hover-area {
background: #8deaed;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#8deaed), to(#9fedf0));
background: -moz-linear-gradient(#8deaed, #9fedf0);
background: linear-gradient(#8deaed, #9fedf0);
box-shadow: inset 0 0 0 1px #b9f2f5;
}
.ui-state-default {
border: 0px solid rgba(211, 211, 211, 0.54);
background: #C0C0C0;
-moz-box-shadow: inset 0 0 0 1px #63ad0d;
-webkit-box-shadow: inset 0 0 0 1px #63ad0d;
-moz-border-radius: 0px;
background: #eee;
background: -moz-linear-gradient(#eee, #e2e2e2);
box-shadow: inset 0 0 0 1px #aaa;
color: #5A5757;
font: bold 10px Arial, Helvetica, Clean, sans-serif;
text-align: center;
}
我为您创建了一个小提琴示例。
+0
虽然这个链接可能回答这个问题，但最好在这里包含答案的重要部分，并提供供参考的链接。如果链接页面更改，则仅链接答案可能会失效。 - [来自评论]（/ review/low-quality-posts/12778965） – Laurel 2016-06-22 21:54:44
+0
@Laurel该链接不是包含信息的参考，而是指向工具的链接。你的自动装订对于这样的链接没有意义。 – 2016-06-22 22:14:17
+0
@MarkAmery它包含代码，其中一些应该回答这个问题（理论上）。重要的部分可以复制，除非它太多（我们应该看看问题是否太宽泛）。 – Laurel 2016-06-22 22:17:15
相关问题
- 1. 如何在选择单元格时突出显示表格列
- 2. 选中时突出显示单元格
- 3. 如何突出显示pygtk表中的单个单元格？
- 4. iPhone SDK - 突出显示TableView中选定的单元格
- 5. 突出显示DataGridView中的选定单元格？
- 6. 只使表格中突出显示的单元格值
- 7. 如果单元格不突出显示
- 8. 突出显示单个单元格
- 9. 单击突出显示表格视图单元格
- 10. 表格单元格的突出显示 - html/css
- 11. 如何清除UI集合中选定的突出显示单元格查看
- 12. VBA单元格没有突出显示
- 13. 选中时突出显示单元格的一部分
- 14. 以编程方式突出显示表格视图单元格
- 15. 基于文本框值突出显示表格单元格
- 16. 目标C：如何突出显示tableView单元格，并在表格重新加载时使其突出显示？
- 17. 单击表格中的链接时突出显示HTML表格
- 18. 如何在表格视图单元格上设置突出显示的图像？
- 19. 突出显示特定tableview部分中的所有单元格
- 20. 表格视图单元格内的按钮在单元格上点击时显示突出显示的状态
- 21. 突出显示数据表中的单元格数据
- 22. 使用javascript突出显示动态php表中的单元格
- 23. 选中时突出显示收集单元格
- 24. 自定义表格单元格显示
- 25. 如何使视图突出显示像表格视图单元格
- 26. 突出显示具有任何选定单元格的行的行标题
- 27. Excel：突出显示单元格中的文本而不是单元格（无vba）
- 28. 突出显示编程WPF单元格中的单元格点击
- 29. 如何突出显示数据网格中已编辑的单元格
- 30. 如何突出显示jtable单元格的文字？
那么，你需要发布你的代码，你尝试过什么，以及你卡在哪里。创建一个plunker会很有用（或者jsfiddle/jsbin/etc）。 – SoluableNonagon 2014-11-24 17:22:29
要解决您的问题，您可能需要在每个单元格上创建一个mousedown和mouseup侦听器，然后您可以使用角元素抓取第一个mousedown和mouseup之间的所有单元。 – SoluableNonagon 2014-11-24 17:24:07