Question

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

我将searchResultsTable中的多行移至selectedCustomersTable，反之亦然。因此，用户可以使用添加和删除按钮在两个表之间来回连续移动行。

添加按钮是指searchResultsTable选择了行并且您希望将这些行移至selectedCustomersTable时。这很有效。

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

这是我的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>

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

jQuery 1.7在表之间来回移动行

1 个答案: