jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）

最新推荐文章于 2022-11-21 11:58:02 发布

weixin_30711917

最新推荐文章于 2022-11-21 11:58:02 发布

阅读量167

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/firstdream/p/8268397.html

版权

现在很多后台列表为了方便均使用拖拽排序的功能，对列表进行随意的排序。

话不多说，我在网上找了一些demo，经过对比，现在把方便实用的一个demo列出来，基于jqueryUI.js

先上html代码，很简单：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>jqueryUI拖动</title> </head> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/jquery-ui.min.js"></script> <style> tr{cursor: pointer;} </style> <body> <table id="sort"> <thead> <tr> <th class="index">序号</th> <th>年份</th> <th>标题</th> <th>作者</th> </tr> </thead> <tbody> <tr> <td class="index">1</td> <td>2014</td> <td>这是第1个</td> <td>阿斯蒂芬阿斯蒂芬</td> </tr> <tr> <td class="index">2</td> <td>2015</td> <td>这是第2个</td> <td>阿萨德发射点发岁的</td> </tr> <tr> <td class="index">3</td> <td>2016</td> <td>这是第3个</td> <td>阿萨德发送地方</td> </tr> <tr> <td class="index">4</td> <td>2017</td> <td>这是第4个</td> <td>的说法大赛分</td> </tr> </tbody> </table> </body> </html>

除了要引入jquery.js 和jqueryUI.js外，还需要如下一段代码：

  $(document).ready(function(){
        var fixHelperModified = function(e, tr) {
                    var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { $(this).width($originals.eq(index).width()) }); return $helper; }, updateIndex = function(e, ui) { $('td.index', ui.item.parent()).each(function (i) { $(this).html(i + 1); }); }; $("#sort tbody").sortable({ helper: fixHelperModified, stop: updateIndex }).disableSelection(); });

这是我发现的比较实用的一个拖动排序，还是比较方便的。

转载于:https://www.cnblogs.com/firstdream/p/8268397.html

weixin_30711917

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）

现在很多后台列表为了方便均使用拖拽排序的功能，对列表进行随意的排序。话不多说，我在网上找了一些demo，经过对比，现在把方便实用的一个demo列出来，基于jqueryUI.js先上html代码，很简单：<!DOCTYPE html><html lang="en"><head> <meta char...
复制链接

扫一扫