1

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>

4

2 に答える 2

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
}

さらに、コードを提供していないため、これは悪いことなので、何も提供しないとほとんどの人はここであなたを助けません...したがって、上記のコードは機能しない可能性があります。

于 2013-01-24T12:33:53.003 に答える
0

OK、これがアップデートの解決策です。ただし、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;
}
于 2013-01-25T13:50:35.727 に答える