0

searchResultsTable-との間で行を移動しようとしている 2 つのテーブルがありselectedCustomersTableます。これは非常に単純な作業です。2 つのテーブル間で行を連続的に前後に移動できるようにするだけです。

複数の行を からsearchResultsTableに、selectedCustomersTableまたはその逆に移動します。そのため、ユーザーは追加ボタンと削除ボタンを使用して、2 つのテーブル間で行を連続的に前後に移動できます。

追加ボタンは、 でsearchResultsTable行が選択されていて、それらを に移動する場合に使用しますselectedCustomersTable。それはうまくいきます。

削除ボタンは、 で行を選択し、selectedCustomersTableそれらを削除したり、 に戻したりするためのものsearchResultsTableです。それは機能していないようです。行を数回前後に移動した後、イベントが失われ、機能しなくなったようです。jquery 1.7 でイベントを使用しようとして.onいますが、うまくいきません。「2 つのテーブル間で行を移動する」機能は何度も機能しません。1 回でうまくいくようなものですが、何度もうまくいくわけではありません。

ここに私のjQueryコードがあります - 誰かが問題が何であるかを見て、これを何度も何度も動作させる方法を提供できますか? 何度も何度も-意味-ユーザーがそうしたい場合は、2つのテーブル間で行を永久に前後に移動します。

<script type="text/javascript">
    $(function () {
        $('#searchResultsTable').on('click', function (e) {
            bindTableEvents();
        });
        $('#selectedCustomersTable').on('click', function (e) {
            bindTableEvents();
        });

        bindTableEvents();


        function bindTableEvents() {
            var $t1 = $('#searchResultsTable');
            var $t2 = $('#selectedCustomersTable');
            alert('in');
            setupTable($t2);
            setupTable($t1);
        }

        function setupTable($table) {
            $table.initializeTable({
                navigate: {
                    control: { keyboard: true, mouse: true },
                    select: { multiple: true }
                }
            });

            $table.on('mouse', function (e, event) {
                if (event.which == 1 && !event.ctrlKey && !event.shiftKey) {
                    var $selected = $table.selected();
                    if ($selected.length == 1) {
                        !$selected.hasClass('active');
                    }
                }
            });

            $table.on('keyboard', function (e, event) {
                var $selected = $table.selected();
                switch (event.which) {
                    case 13:
                        //ENTER
                        if ($selected.length == 1) {
                            !$selected.hasClass('active');
                        }
                        if ($selected.length > 0) {

                        }
                        break;
                    case 46:
                        //DELETE
                        if ($selected.length > 0) {

                        }
                        break;
                }
            });
        }

        $('#addButton').click(function () {
            var selectedRows = $('#searchResultsTable').selected();
            $('#selectedCustomersTable').append(selectedRows.removeClass('focus').remove());
        });

$('#removeButton').click(function () {
            var selectedRows = $('#selectedCustomersTable').selected();
            $('#searchResultsTable').append(selectedRows.removeClass('focus').remove());
            });

    });
</script>
4

1 に答える 1

1

私もこの問題に苦労しました。しかし、私はこの行を直接移動することを探していました。これが私の解決策です：

$(document).ready(function() {
    $("#searchResultsTable tbody").on("click","tr", function() {
        var tr = $(this).closest("tr").remove().clone();
    $("#selectedCustomersTable tbody").append(tr);
    });
    $('#selectedCustomersTable table tbody').on("click","tr", function() {
            var tr = $(this).closest("tr").remove().clone();
            $("#searchResultsTable tbody").append(tr);
    }); 
});

ここでのポイントは、テーブル行のクリックを処理する tbody にイベント処理をバインドすることです。したがって、2 番目のテーブルに挿入された新しい HTML 要素は、tbody がイベントを処理するため、戻る機能を保持します。

于 2013-03-05T14:08:38.267 に答える