文章/答案/技术大牛

发布

社区首页 >问答首页 >使用jQuery根据id锁定列

问使用jQuery根据id锁定列
EN

Stack Overflow用户

提问于 2013-01-24 18:33:43

回答 2查看 386关注 0票数 1

是否可以使用jquery根据列的id锁定该列？我已经看到了不同的解决方案，比如头锁定，有些还可以从左锁定索引的列。我正在尝试做的是，当我点击锁定按钮时，它将锁定列，并且在水平滚动时不会移动。

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

Click here to view image

下面是我的代码：

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

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-01-25 21:50:36

好的，这是你的更新的解决方案。但是，ids应该是唯一的，所以您不应该有2个或更多相同的ids。类是一般用例中的工具。如果需要唯一列，但在锁定上下文中不使用它们作为引用，则可以添加唯一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;
}

票数 0

Stack Overflow用户

发布于 2013-01-24 20:33:53

好的，我知道了。继续fricke

修复圆柱的方法..。

似乎你需要一张固定列的地图，并防止堆积在另一列之上。它并没有像你想的那样被替换，它只是可能是新的修复在旧的上面。

所以你要这样做：

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
}

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14499198

复制

相似问题

问使用jQuery根据id锁定列
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery根据id锁定列EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery根据id锁定列
EN