针对后台列表table拖拽比较实用的jquery拖动排序
现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序。
话不多说,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js
先上html代码,很简单:
复制代码
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>jqueryUI拖动</title> </head> <scriptsrc="js/jquery-1.11.0.min.js"></script> <scriptsrc="js/jquery-ui.min.js"></script> <style> tr{cursor:pointer;} </style> <body> <tableid="sort"> <thead> <tr> <thclass="index">序号</th> <th>年份</th> <th>标题</th> <th>作者</th> </tr> </thead> <tbody> <tr> <tdclass="index">1</td> <td>2014</td> <td>这是第1个</td> <td>阿斯蒂芬阿斯蒂芬</td> </tr> <tr> <tdclass="index">2</td> <td>2015</td> <td>这是第2个</td> <td>阿萨德发射点发岁的</td> </tr> <tr> <tdclass="index">3</td> <td>2016</td> <td>这是第3个</td> <td>阿萨德发送地方</td> </tr> <tr> <tdclass="index">4</td> <td>2017</td> <td>这是第4个</td> <td>的说法大赛分</td> </tr> </tbody> </table> </body> </html>
复制代码
除了要引入jquery.js和jqueryUI.js外,还需要如下一段代码:
复制代码
$(document).ready(function(){ varfixHelperModified=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); }); }; $("#sorttbody").sortable({ helper:fixHelperModified, stop:updateIndex }).disableSelection(); });
这是我发现的比较实用的一个拖动排序,还是比较方便的。