То, что я пытаюсь сделать, позволяет пользователю выбирать строки из одного столбца за раз, используя пользовательский интерфейс jQuery.
То, что мне нужно сделать, это ограничить эффект перетаскивания/выделения из более чем одного столбца. Например, когда-либо столбец, пользователь запускает событие перетаскивания, в котором они не могут выделить сторону этой колонки.
Код таблицы
<table id="selectable">
<tr>
<td data-col="0">
<td data-col="1">
<td data-col="2">
</tr>
<tr>
<td data-col="0">
<td data-col="1">
<td data-col="2">
</tr>
<tr>
<td data-col="0">
<td data-col="1">
<td data-col="2">
</tr>
...etc
</table>
JQuery:
var currentCol;
$("#selectable").selectable({
filter:'td',
selecting: function(event, ui){
console.log($(ui.selected));
}
});
Но я не могу получить доступ к значению data-col
, оно всегда равно null
.
Спасибо Даниилу за то, что он указал мне в правильном направлении.
Чтобы заблокировать перетаскивание вверх по одному столбцу, это то, что я сделал.
var currentCol;
$("#selectable").selectable({
filter: "td",
start: function(event, ui) {
$("td").removeClass("ui-selected");
},
stop: function(event, ui) {
//Reset selector.
currentCol = undefined;
},
selecting: function(event, ui) {
if (currentCol === undefined) {
currentCol = $(ui.selecting).attr('data-col');
}
var nthChild = parseInt(currentCol) + 1; //Add one as nthChild is not zero index
for (var i = 1; i <= 9; i++) {
if (i != nthChild) {
$("td.ui-selecting:nth-child(" + i + ")").each(function() {
$(this).removeClass("ui-selecting");
});
}
}
;
}
});
Если все, что вам нужно, это индекс столбца, это должно работать, чтобы получить его:
$("#selectable").selectable({
filter: "td",
selecting: function(event, ui) {
console.log($(ui.selecting).prevAll().length);
}
});
Кроме того, $(ui.selecting).attr('data-col')
должен работать, если вы все еще хотите использовать этот метод. В вашем примере вы используете ui.selected
где вы должны использовать ui.selecting
.
jsFiddle
Помните, что вы можете использовать селектор JQuery td:nth-child($column_index)
(начало индекса с 1)
$("#selectable").selectable({
filter: "td:nth-child(1)",
selecting: function (e, ui) {
$(ui.selecting).css({'border':'1px solid black'})
},
unselecting: function (e, ui) {
$(ui.unselecting).css({ 'border': '' })
}
});