可折叠表，可排序，同时移动2行？

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

我想出了一个解决办法。答案似乎是在“开始”和“停止”时触发的可排序函数。我使用的代码如下：

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);
    }
},

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

有一个小摆设显示了它的作用：http://jsfiddle.net/u7cfZ/14/

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