表格拖动排序jquery-ui

最新推荐文章于 2023-09-12 18:20:05 发布

ispotu

最新推荐文章于 2023-09-12 18:20:05 发布

阅读量4.9k

点赞数 2

分类专栏： js 文章标签： js js_html

js 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

转自：http://www.cnblogs.com/haitao-fan/p/3908633.html

参考原文链接：

http://stackoverflow.com/questions/2072848/reorder-html-table-rows-using-drag-and-drop

在最近的项目中，我们有这样一个需求，要手动拖动html table中的行(tr)进行排序，

就是我可以将第一行拖到第三行，第四行拖到六行这样子。

一开始我想起了jquery ui中的sortable，发现没有这样的例子。

一筹莫展，于是谷歌之，发现了这位大神的回复。原来人家还是用了jquery ui的sortable

HTML

需要引入jquery和jquery ui的js文件

<table id="sort" class="grid" title="Kurt Vonnegut novels">
    <thead>
        <tr><th class="index">No.</th><th>Year</th><th>Title</th><th>Grade</th></tr>
    </thead>
    <tbody>
        <tr><td class="index">1</td><td>1969</td><td>Slaughterhouse-Five</td><td>A+</td></tr>
        <tr><td class="index">2</td><td>1952</td><td>Player Piano</td><td>B</td></tr>
        <tr><td class="index">3</td><td>1963</td><td>Cat's Cradle</td><td>A+</td></tr>
        <tr><td class="index">4</td><td>1973</td><td>Breakfast of Champions</td><td>C</td></tr>
        <tr><td class="index">5</td><td>1965</td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
    </tbody>
</table>

javascript:

 
           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();