Question

我要做的是允许用户使用jQuery UI select一次从一列中选择行。

我需要做的是限制跨越多列的拖动/突出显示效果。例如。在用户开始拖动事件的列中，他们不能突出显示那一列。

表格代码

<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。

Answer 1

感谢Daniel指出我正确的方向。

为了将拖拽锁定在单个列的顶部，这就是我所做的。

    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");
                    });
                }
            }
            ;
        }
    });

Answer 2

如果你关心的只是列索引，那么这应该是有用的：

$("#selectable").selectable({
    filter: "td",
    selecting: function(event, ui) {
        console.log($(ui.selecting).prevAll().length);   
    }
});

如果您仍想使用该方法，$(ui.selecting).attr('data-col')也应该有效。在您的示例中，您使用的是ui.selected，您应该使用ui.selecting。

jsFiddle

Answer 3

请记住，您可以使用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': '' })
    }
});

如何使用jQuery UI选择表中只有一列？

3 个答案:

jsFiddle