如何使用jquery sortable对表列表进行排序?

时间:2012-11-21 12:05:11

标签: javascript jquery draggable jquery-ui-sortable

所以我有很多表行,每个表都属于不同的组,我想要的是属于同一组的每一行都在不同的表中,并且可以在这个表中排序(这是很容易),但我也希望那些组的表也可以排序,这样你就可以拖动整个表并在其他表中重新排序..

我尝试制作一个主可排序表,其中包含可包含可排序记录的组表。

以下是我的意思

Table 1
-----------------------------
Field 1 | Field 2 | Filed 3 |
-----------------------------
R1C1    | R1C2    | R1C3    |
-----------------------------
R2C1    | R2C2    | R2C3    |
-----------------------------

Table 2
-----------------------------
Field 1 | Field 2 | Filed 3 |
-----------------------------
R1C1    | R1C2    | R1C3    |
-----------------------------
R2C1    | R2C2    | R2C3    |
-----------------------------

这些表(表1和表2)的地方可以交换(重新排序)当然包括所有内容。

非常有责任!

1 个答案:

答案 0 :(得分:2)

一个简单的解决方案是将各个表包装在div中,并将一个handle元素添加到div中。我假设你正在使用jQueryUI sortable,它有一个handle选项可用于draggables和sortables

HTML:

<uL>
   <li>
        <div>
            <div class="handle"></div>
            <table> </table>
        </div>
    </li>
</ul>

jQuery的:

$('table').sortable({items:'tr'});
$('ul').sortable({
    items:'li',
    handle:'.handle'
});

DEMO:http://jsfiddle.net/fYx4D/1/