jquery - 使用 jQuery 锁定基于 id 的列

Question

是否可以使用 jquery 根据其 id 锁定列？我见过不同的解决方案，例如标题锁定，有些还可以锁定从左侧开始索引的列。我想要做的是当我单击锁定按钮时，它将锁定列并且在水平滚动时不会移动。

例如，我单击标题 1 上的锁定，水平滚动，然后单击标题 3 上的锁定。标题 1 和标题 3 应该彼此相邻，并且在水平滚动时不应移动。

点击这里查看图片

下面是我的代码：

<div style="float: left; width: 75%; overflow-x: scroll;">
<table style="width: 200% !important;">
    <tr>
        <td id="lid_1" colspan="3">
            <div style="margin-top: 3px;">
                January 24, 2013
                <button id="lid_1">Lock</button>
            </div>
        </td>
        <td id="lid_2" colspan="3">
            <div style="margin-top: 3px;">
                January 25, 2013
                <button id="lid_2">Lock</button>
            </div>
        </td>
        <td id="lid_3" colspan="3">
            <div style="margin-top: 3px;">
                January 26, 2013
                <button id="lid_3">Lock</button>
            </div>
        </td>
        <td id="lid_4" colspan="3">
            <div style="margin-top: 3px;">
                January 27, 2013
                <button id="lid_4">Lock</button>
            </div>
        </td>
        <td id="lid_5" colspan="3">
            <div style="margin-top: 3px;">
                January 27, 2013
                <button id="lid_5">Lock</button>
            </div>
        </td>
        <td id="lid_6" colspan="3">
            <div style="margin-top: 3px;">
                January 28, 2013
                <button id="lid_6">Lock</button>
            </div>
        </td>
    </tr>
    <tr>
        <td id="lid_1">Header 1</td>
        <td id="lid_1">Header 2</td>
        <td id="lid_1">Header 3</td>
        <td id="lid_2">Header 1</td>
        <td id="lid_2">Header 2</td>
        <td id="lid_2">Header 3</td>
        <td id="lid_3">Header 1</td>
        <td id="lid_3">Header 2</td>
        <td id="lid_3">Header 3</td>
        <td id="lid_4">Header 1</td>
        <td id="lid_4">Header 2</td>
        <td id="lid_4">Header 3</td>
        <td id="lid_5">Header 1</td>
        <td id="lid_5">Header 2</td>
        <td id="lid_5">Header 3</td>
        <td id="lid_6">Header 1</td>
        <td id="lid_6">Header 2</td>
        <td id="lid_6">Header 3</td>
    </tr>
    <tr>
        <td id="lid_1" colspan="3">
            <table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <br/>
            </table>
        </td>
        <td id="lid_2" colspan="3">
            <table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <br/>
            </table>
        </td>
        <td id="lid_3" colspan="3">
            <table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <br/>
            </table>
        </td>
        <td id="lid_4" colspan="3">
            <table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <br/>
            </table>
        </td>
        <td id="lid_5" colspan="3">
            <table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <br/>
            </table>
        </td>
        <td id="lid_6" colspan="3">
            <table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <br/>
            </table>
        </td>
    </tr>
</table>

Answer 1

好，我知道了。继续弗里克

固定列的方法...

看来您需要一张固定列的地图，并防止堆积在另一列之上。它并没有像您认为的那样被替换，只是新修复的可能位于旧的之上。

所以你这样做：

var fixedColumns = jQuery();
$('#id_of_column').click(function () {
    var that = $(this);
    if (that.hasClass('locked')) {
        //Unlock
        that.removeClass('locked')
            .css({'left': ''});
        fixedColumns = fixedColumns.not(that);
    } else {
        //Lock
        fixedColumns = fixedColumns.add(that);
        that.addClass('locked');
        orderLockedColumns(fixedColumns);
    }
});

function orderLockedColumns(columns) {
    var that, leftPos, prevCol, prevColWidth, prevColPos;
    columns.each(function (i) {
        that = $(this),
        leftPos = 0;
        if (i !== 0) {
            prevCol = jQuery(columns[i - 1])
            prevColWidth = prevCol.width();
            prevColPos = prevCol.position().left;
            leftPos = prevColPos + prevColWidth
        }
        that.css('left', leftPos+'px');
    })
}

CSS：

.locked{
  position:fixed;
}

但是我不建议添加基于id！

最好使用class="lockButton"，然后如果您需要该 id，您可以使用它。所以最好：

jQuery(document).on('click','.lockButton'){
   var that = $(this),
   id = that[0].id;
   //... same code
}

此外，由于您没有提供代码，这很糟糕，如果您不提供任何代码，大多数人不会在这里为您提供帮助......所以上面的代码可能不起作用，因为我根本不知道您的标记只是猜测。

Answer 2

好的，这是您更新的解决方案。但是 id 是唯一的，所以你不应该有 2 个或更多相同的 id。类是一般用例中的工具。如果需要唯一列，但在锁定上下文中不使用它们作为参考，您可以添加唯一 ID，但是当您想使用它做某事时提取 ID。

以下是示例：

http://jsbin.com/odaxil/5

http://jsbin.com/odaxil/5/edit

js：

(function (window, undefined) {
    jQuery(function () {
        bindings();
    });

    function bindings() {
        var locker = jQuery('#locker');
        jQuery(document).on('click', 'button.lockButton', function () {
            var that = $(this),
                lidClass = '',
                parent = that.parents('td[class^="lid"]');
            if (parent.length) {
                lidClass = getColumnLidClass(parent);
                lockings = jQuery('td.' + lidClass);
                lockings.addClass('locked');
                that.text('Unlock');
                var fixedColumn = $(getLockedWrapper(lockings, lidClass));
                var index = parent.index();
                fixedColumn.data('index', index);

                if (index === 0) {
                    locker.prepend(fixedColumn);
                } else {
                    var lockedWraps = $('div.lockedWrap', locker),
                        lwrap = null,
                        indx, appended = false;
                    if (!lockedWraps.length) locker.append(fixedColumn);
                    lockedWraps.each(function () {
                        lwrap = $(this);
                        indx = lwrap.data('index') * 1;
                        if (!appended && (index < indx)) {
                            lwrap.before(fixedColumn);
                            appended = true;
                            return;
                        }
                    });
                    if (!appended) locker.append(fixedColumn);
                }
                that.text('Lock');
            } else {
                parent = that.parents('div.lockedWrap');
                lidClass = getColumnLidClass(parent);
                lockings = jQuery('td.' + lidClass);
                lockings.removeClass('locked');
                parent.remove();
            }
        });
    }


    function getLockedWrapper(lockings, lidClass) {
        var fixedColumn = [],
            cont;
        lockings.each(function () {
            cont = $(this).html();
            fixedColumn.push('<div class="cellWrap">' + cont + '</div>');
        });
        fixedColumn = '<div class="' + lidClass + ' lockedWrap">' + fixedColumn.join('') + '</div>';
        return fixedColumn;
    }

    function getColumnLidClass(td) {
        for (var i = 0; i < 100; i++) {
            if (td.hasClass('lid_' + i)) break;
        }
        return 'lid_' + i;
    }
})();

HTML：

<div id="locker"></div>
<div style="float: left; width: 75%; overflow-x: scroll;">
    <table style="width: 200% !important;">
        <tr>
            <td class="lid_1" colspan="3">
                <div style="margin-top: 3px;">January 24, 2013
                    <button class="lockButton" id="lid_1">Lock</button>
                </div>
            </td>
            <td class="lid_2" colspan="3">
                <div style="margin-top: 3px;">January 25, 2013
                    <button class="lockButton" id="lid_2">Lock</button>
                </div>
            </td>
            <td class="lid_3" colspan="3">
                <div style="margin-top: 3px;">January 26, 2013
                    <button class="lockButton" id="lid_3">Lock</button>
                </div>
            </td>
            <td class="lid_4" colspan="3">
                <div style="margin-top: 3px;">January 27, 2013
                    <button class="lockButton" id="lid_4">Lock</button>
                </div>
            </td>
            <td class="lid_5" colspan="3">
                <div style="margin-top: 3px;">January 27, 2013
                    <button class="lockButton" id="lid_5">Lock</button>
                </div>
            </td>
            <td class="lid_6" colspan="3">
                <div style="margin-top: 3px;">January 28, 2013
                    <button class="lockButton" id="lid_6">Lock</button>
                </div>
            </td>
        </tr>
        <tr>
            <td class="lid_1">Header 1</td>
            <td class="lid_1">Header 2</td>
            <td class="lid_1">Header 3</td>
            <td class="lid_2">Header 1</td>
            <td class="lid_2">Header 2</td>
            <td class="lid_2">Header 3</td>
            <td class="lid_3">Header 1</td>
            <td class="lid_3">Header 2</td>
            <td class="lid_3">Header 3</td>
            <td class="lid_4">Header 1</td>
            <td class="lid_4">Header 2</td>
            <td class="lid_4">Header 3</td>
            <td class="lid_5">Header 1</td>
            <td class="lid_5">Header 2</td>
            <td class="lid_5">Header 3</td>
            <td class="lid_6">Header 1</td>
            <td class="lid_6">Header 2</td>
            <td class="lid_6">Header 3</td>
        </tr>
        <tr>
            <td class="lid_1" colspan="3">
                <table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <br/>
                </table>
            </td>
            <td class="lid_2" colspan="3">
                <table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <br/>
                </table>
            </td>
            <td class="lid_3" colspan="3">
                <table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <br/>
                </table>
            </td>
            <td class="lid_4" colspan="3">
                <table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <br/>
                </table>
            </td>
            <td class="lid_5" colspan="3">
                <table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <br/>
                </table>
            </td>
            <td class="lid_6" colspan="3">
                <table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <br/>
                </table>
            </td>
        </tr>
    </table>
</div>

CSS：

.locked{
  display:none;
}
#locker{
  float: left;
  min-width: 100px;
  min-height: 110px;
  background-color: #333;
}
div.lockedWrap{
  float:left;
  margin-right:1px;
  background-color: orange;
}