使用 jQuery Selectable 插件获取选定的行和列答案

【问题标题】：Get selected rows and columns with jQuery Selectable plugin使用 jQuery Selectable 插件获取选定的行和列
【发布时间】：2014-11-03 15:48:47
【问题描述】：

我正在使用 jQuery ui Selectable 插件。它工作得非常好，但我需要做的下一件事是获取所选行和列的长度。我会将这些数字与 jQuery .attr 一起使用，将选定的单元格与 colspan 和 rowspan 组合在一起。

firstCell = $(".ui-selected").first().attr("id");
$("#"+firstCell).attr({"colspan": <dynamic number columns>, "rowspan": <dynamic number rows>});

HTML 代码是用 jQuery 动态生成的：

$("#div1").empty()

var RH = $("#RH").text();

if(RH) {

    $("#div1").css("display", "block");

    var html = '<table class="rack" style="border=0; cellspacing=0; cellpadding=1; width: 100%;"><thead><tr></tr></thead><tbody id="selectable">';
    html += "<tr><th width='10%'>&nbsp;</th><th width='20%'>Front</th><th width='50%'>&nbsp;&nbsp;&nbsp; Interior</th><th width='20%'>Back</th></tr>";

    for (var i = RH; i >= 1; i--) {

        html += '<tr>\
                    <th>'+i+'</th>\
                    <td id="r'+i+'c1" class="atom state_F r'+i+'c1">\
                        <div title="Free rackspace">&nbsp;</div>\
                    </td>\
                    <td id="r'+i+'c2" class="atom state_F r'+i+'c2">\
                        <div title="Free rackspace">&nbsp;</div>\
                    </td>\
                    <td id="r'+i+'c3" class="atom state_F r'+i+'c3">\
                        <div title="Free rackspace">&nbsp;</div>\
                    </td>\
                </tr>';
        }


    html += '</tbody></table>';
    $(html).appendTo('#div1');
}

如何让 jQuery ui 可选择返回所选行/列的数量？

【问题讨论】：

请向我们展示您的 HTML 代码。
你是在使用 jquery ui selectable 还是其他的东西..？
是的，我正在使用 jquery ui selectable。

标签： jquery jquery-ui-selectable

【解决方案1】：

我通过将所有选定的 id 分为两部分来解决我的问题。一部分是唯一选择的行的数量，一部分是唯一选择的列的数量。然后，我在 .attr 属性的行中使用这些数值作为动态值。

$("#selectable").selectable({
    filter: 'td',
    stop: function () {
        loop = 0;
        var rowList = Array();
        var columnList = Array();

        var result = $("#select-resultSpan").empty();
        $(".ui-selected", this).each(function() {
            var index = $("td").index(this);
            result.append("<li>" + $(this).attr("class") + "</li>");    
            var selectedID = $(this).attr("id");
            var row = selectedID.substr(0, 3);
            var column = selectedID.substr(3);

            rowList.push(row);
            columnList.push(column);

            if(loop == 0) {
                firstCell = $(".ui-selected").first().attr("id");
                $("#"+firstCell).removeClass("atom state_F");
                $("#"+firstCell).addClass("atom state_T");  


                $(".ui-selected").not($("#"+firstCell)).remove();

                loop += 1;
            }
        });

        var uniqueRows = ($.unique(rowList).length); // dynamic rowspan value
        var uniqueColumns = ($.unique(columnList).length); // dynamic colspan value

        $("#"+firstCell).attr({"colspan": uniqueColumns, "rowspan": uniqueRows});   

        $("#addObject").css("display", "block");
    }

});

我希望这对将来的其他人也有帮助。

【讨论】：