1

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

我需要做的是限制拖动/突出显示效果跨越多于一列。例如，用户在哪一列开始拖动事件，他们无法突出显示该列。

表代码

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

4

3 回答 3

5

感谢丹尼尔为我指明了正确的方向。

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

    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");
                    });
                }
            }
            ;
        }
    });
于 2013-07-09T10:33:49.770 回答
4

如果您只关心列索引，那么这应该可以得到它：

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

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

jsFiddle

于 2013-07-05T17:19:51.390 回答
0

请记住，您可以使用 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': '' })
    }
});
于 2016-06-18T15:19:47.727 回答