Question

我使用jquery UI排序小部件来排序表行。我的表中有简单的行和行组，我使用rowspan来完成行的分组。

简单行：吉尔，史密斯，50岁一排排：Eve，Jackson，94，

简单排序工作得非常好，但是当我尝试拖动包含行组的行时，它无效。我需要一些输入来知道我在哪里拖动行组。

检查我的Js小提琴：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();

在我出错的地方，我需要你的输入。

enter image description here

Answer 1

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

<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部分更改为使用items选项和行.ui-sortable-handle的行：

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

我想CSS样式还有一些微调，但Sortable部分仍在工作。所以我希望你能找到它:-) Fiddle

表问题中的Jquery UI可排序RowSpan

1 个答案: