0

我有两个表，我试图在 -searchResultsTable和selectedCustomersTable. 这是一项非常简单的任务 - 只需能够在两个表之间连续来回移动行。

我将多行从searchResultsTable其中移入selectedCustomersTable，反之亦然。因此，用户可以使用添加和删除按钮在两个表之间连续地前后移动行。

添加按钮是当searchResultsTable已选择行并且您想要将这些移动到selectedCustomersTable. 这样可行。

删除按钮用于选择 中的行selectedCustomersTable并将它们删除/将它们移回searchResultsTable. 这似乎不起作用。在来回移动行几次后，事件似乎丢失了，它就停止了工作。我正在尝试.on在 jquery 1.7 中使用事件，但没有运气。“在两个表之间移动行”功能不会一遍又一遍地工作。就像它工作一次，然后它不会一遍又一遍地工作。

这是我的 jQuery 代码 - 有人可以看到问题所在并提供一种方法来让它一遍又一遍地工作吗？一遍又一遍——意思是——如果用户愿意的话，永远在两个表之间来回移动行。

<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上的事件处理，处理table行的点击。因此，插入到第二个表中的新 HTML 元素保留了向后移动的功能，因为 tbody 处理了事件。

于 2013-03-05T14:08:38.267 回答