jquery ui table

qq_40441894

于 2017-09-29 15:43:22 发布

阅读量1.4k

点赞数

本文介绍如何利用jQuery UI Sortable插件实现网页表格行的拖拽功能，并保持拖动过程中单元格的宽度不变。通过自定义辅助函数fixHelper确保拖动时的视觉效果，同时限制拖动轴为Y轴，仅允许上下移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[代码] jquery ui sortable 实现table，row的拖动跳至 [1]

 
        01. 
        // Return a helper with preserved width of cells    
       
        02.         
        var 
         fixHelper =  
        function 
        (e, ui) {   
       
        03.             
        //console.log(ui)    
       
        04.            ui.children().each( 
        function 
        () {   
       
        05.                $( 
        this 
        ).width($( 
        this 
        ).width());      
        //在拖动时，拖动行的cell（单元格）宽度会发生改变。在这里做了处理就没问题了    
       
        06.            });   
       
        07.             
        return 
         ui;   
       
        08.        };   
       
        09.            
       
        10.           
       
        11.        jQuery( 
        function 
        (){   
       
        12.            jQuery( 
        "#hrCalendar tbody" 
        ).sortable({                 
        //这里是talbe tbody，绑定 了sortable    
       
        13.                helper: fixHelper,                   
        //调用fixHelper    
       
        14.                axis: 
        "y" 
        ,   
       
        15.                start: 
        function 
        (e, ui){   
       
        16.                    ui.helper.css({ 
        "background" 
        : 
        "#fff" 
        })      
        //拖动时的行，要用ui.helper    
       
        17.                     
        return 
         ui;   
       
        18.                },   
       
        19.                stop: 
        function 
        (e, ui){   
       
        20.                     
        //ui.item.removeClass("ui-state-highlight"); //释放鼠标时，要用ui.item才是释放的行    
       
        21.                     
        return 
         ui;   
       
        22.                }   
       
        23.            }).disableSelection();   
       
        24.        })