Jquery UI Sortable RowSpan inside Table 问题

Question

我正在使用 jquery UI 排序小部件对 table 行进行排序。在我的 table 中，我有简单的行和行组我已经使用 rowspan 来完成行分组。

单排：吉尔、史密斯，50 岁行组：Eve, Jackson, 94,

简单排序非常有效，但是当我尝试拖动包含一组行的行时，它不起作用。我需要一些输入来知道拖动行组哪里出错了。

检查我的 Js Fiddle : http://jsfiddle.net/rickjackson/3Lbfd8ch/1/

我已经编写了以下代码以在我的代码中启用排序

var fixHelper = function (e, ui) { ui.children().each(function () 
{
 $(this).width($(this).width()); }); return ui; 
};
$("#t01 tbody").sortable({ helper: fixHelper }).disableSelection();

我需要你在我出错的地方提供意见。

Answer 1

我看了一下这个，我设法让它工作，一旦我为第 2 列和第 3 列有四行的行创建了两个嵌套表。

<table id="t01" style="width: 100%;" border="1">
    <tbody class="ui-sortable">
        <tr class="ui-sortable-handle">
            <td>Jill</td>
            <td><div class="columnMargin">Smith</div></td>
             <td><div class="columnMargin">50</div></td>
        </tr>
        <tr class="ui-sortable-handle" data-multiple="true">
            <td>Eve</td>
            <td>
                <table class="multipleRows">
                    <tr>
                        <td style="border-style:solid">Jackson</td>
                    </tr>
                    <tr>
                        <td style="background-color: lightblue;">
                            <input name="cell1" type="text">
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color: lightblue;">
                            <input name="cell1" type="text">
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color: lightblue;">
                            <input name="cell2" type="text">
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="multipleRows">
                    <tr>
                        <td style="border-style:solid">94</td>
                    </tr>
                    <tr>
                        <td style="background-color: lightblue;">
                            <input name="cell1" type="text">
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color: lightblue;">
                            <input name="cell1" type="text">
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color: lightblue;">
                            <input name="cell2" type="text">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr class="ui-sortable-handle">
            <td>Jill</td>
            <td><div class="columnMargin">Smith</div></td>
            <td><div class="columnMargin">50</div></td>
        </tr>
        <tr class="ui-sortable-handle">
            <td>Eve</td>
            <td><div class="columnMargin">Jackson</div></td>
            <td><div class="columnMargin">94</div></td>
        </tr>
    </tbody>
</table>

我还更改了 jQueryUI 部分，以对具有 class .ui-sortable-handle:

的行使用 items 选项

 $(document).ready(function () {
     $("#t01 tbody").sortable({
         items: ".ui-sortable-handle"
     }).disableSelection();
 });

我想 CSS 样式还有一些微调，但 Sortable 部分仍然有效。所以我希望你觉得没问题:-) Fiddle

Jquery UI Sortable RowSpan inside Table 问题

Jquery UI Sortable RowSpan inside Table issue

jquery

jquery-ui-sortable