Question

我正在尝试将两个jquery事件混合在一起，并且很难让它正常工作。我正在使用JQuery UI的可排序函数，允许拖放表行...并使用Jquery可折叠菜单。基本上，当您单击父行时，子项将在其下方打开。

我需要能够拖动父级，并让子行跟随。单击父级应该让子级显示在父级下方。目前，孩子被遗弃并扩展到父母所在的地方。

此外，儿童不应该可以排序。

我有一个JSFiddle显示在这里工作：http://jsfiddle.net/u7cfZ/

这是HTML：

<table border="1" width="100%">
    <tbody>
        <tr class="parent" id="parent-1"><td>1</td></tr>
        <tr class="child-parent-1"><td>1.1</td></tr>
        <tr class="parent" id="parent-2"><td>2</td></tr>
        <tr class="child-parent-2"><td>2.1</td></tr>
        <tr class="parent" id="parent-3"><td>3</td></tr>
        <tr class="child-parent-3"><td>3.1</td></tr>
        <tr class="parent" id="parent-4"><td>4</td></tr>
        <tr class="child-parent-4"><td>4.1</td></tr>
        <tr class="parent" id="parent-5"><td>5</td></tr>
        <tr class="child-parent-5"><td>5.1</td></tr>
    </tbody>
</table>

这是JQuery：

$('tr.parent')
    .css("cursor","pointer")
    .attr("title","Click to expand/collapse")
    .click(function(){
        $(this).siblings('.child-'+this.id).toggle();
        $('tr[class^=child-]').not('.child-'+this.id).hide();
});

$('tr[class^=child-]').hide().children('td');

$('table tbody').sortable({
    helper: function(e, ui) {
        ui.children().each(function() {
            $(this).width($(this).width());
        });
        return ui;
    },
    cursor: 'move',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');
        $.ajax({
            data: data,
            type: 'POST',
            url: 'URL_HERE'
        });
    }
}).disableSelection();

我正在努力保持清洁，因为这些表将包含数据..我正在尝试维护使用HTML表格与DIV / UL / LI。

任何人都可以帮助提出一个让孩子和父母一起移动的解决方案吗？

Answer 1

我能够想出一个解决方案。答案似乎是添加一个可排序的功能，该功能在“开始”时触发。并且＆＃39;停止＆＃39;我正在使用的代码是：

start: function(event, ui) {
    ui.item.startPos = ui.item.index();
},
stop: function(event, ui) {
    if(ui.item.startPos < ui.item.index()){
        var child = $('.child-' + ui.item.context.id).remove().clone();
        $('#' + ui.item.context.id).after(child);
        var child = $('.'+$('.child-' + ui.item.context.id).next().attr('class')).remove().clone();
        $('#' + ui.item.context.id).before(child);    
    }else{
        var child = $('.child-' + ui.item.context.id).remove().clone();
        $('#' + ui.item.context.id).after(child);
    }
},

将子行复制到变量中，然后将其删除。它放在父行之后的代码中。

有一个jsfiddle显示了这个：http://jsfiddle.net/u7cfZ/14/

有一个错误导致该行在向下移动时切断了另一个子行，因此根据移动的方向触发了两个单独的函数。

可折叠桌子，可折叠，一次移动2排？

1 个答案: