我对 CSS 很在行,但我对 jQuery 的表现很差。我们都有自己的局限性...
好的,我将开始。我们有一个“最喜欢的产品”表,您可以将其分成几类(例如,酒、绵羊、勺子)。每个类别是一个 .每行(不包括 )是一个产品。
我想让用户拖放(重新排序)表行,甚至在 tbodies 之间。我看过 Table Drag and Drop (DnD) jQuery 插件,但失望地发现它并不真正支持在 tbodies 之间拖动 - 并且已经有一段时间没有更新了。
这是基本的表结构:
<table>
<thead>
<tr>
<th>Favourite</th>
</tr>
</thead>
<tbody>
<tr>
<th>Spoons</th> <!-- secion title, not draggable -->
</tr>
<tr>
<td>Wooden Spoon</td>
</tr>
<tr>
<td>Metal Spoon</td>
</tr>
<tr>
<td>Plastic Spoon</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Nuclear Bombs</th> <!-- seciont title, not draggable -->
</tr>
<tr>
<td>US Nukes</td>
</tr>
<tr>
<td>Soviet Nukes</td>
</tr>
</tbody>
</table>
我需要关闭某些行的“可拖动性”,例如中的第一行 - 这是部分标题。
是否有更好版本的 jquery 插件可以满足我的需要?如果您能找到更好的插件,请分享并赢得我的“本周最喜欢的人”奖。
谢谢。
最佳答案
您将要使用jQueryUi 的可排序插件,然后使用选项
connectWith: '.connectedSortable'
连接不同的表体。
该插件是为列表设计的,但它主要适用于表格。我以前在 table 上成功地使用过它。
这里是关于 jquery ui 的可排序文档的链接:
http://jqueryui.com/demos/sortable/#connect-lists
编辑:
您还需要使用项目选项来指定某些行是可排序的
items: 'tr:not(.dontIncludeMe)'
关于javascript - jQuery 在多个 tbodies 之间拖动(重新排序)表行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3336738/