jquery dragsort table实现拖拽排序

最新推荐文章于 2024-04-24 10:05:42 发布

weixin_30646315

最新推荐文章于 2024-04-24 10:05:42 发布

阅读量757

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/haha12/p/4692052.html

版权

转自：http://haoningabc.iteye.com/blog/1593640

dragsort官网地址：http://dragsort.codeplex.com/

html代码如下（需引入jquery和dragsort.js）：

    <html>  
    <head>  
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jquery.dragsort-0.5.2.min.js"></script>
    </head>  
    <body>  
        <table id="list1" border="1">  
            <thead id="gridThead">  
                    <tr style="cursor: pointer;">  
                        <td class="listHeadCell">编号</td>  
                        <td class="listHeadCell">名称</td>  
                    </tr>  
            </thead>  
            <tbody id="gridtbody">  
                <tr>  
                    <td name="biaozhi">1</td>  
                    <td>名称1</td>  
                </tr>     
                <tr>      
                    <td name="biaozhi">2</td>  
                    <td>名称2</td>  
                </tr>     
                <tr>      
                    <td name="biaozhi">3</td>  
                    <td>名称3</td>  
                </tr>     
                <tr>      
                    <td name="biaozhi">4</td>  
                    <td>名称4</td>  
                </tr>  
            </tbody>  
        </table>  
        <br/>  
        <textarea name="listhaoSortOrder" id="listhaoSortOrder" rows=10 cols=100></textarea>  
        <script type="text/javascript">  
            $(document).ready(function(){  
                $("#gridtbody").dragsort({ itemSelector: "tr", dragSelector: "tr", dragBetween: true,dragEnd: saveOrder1, placeHolderTemplate: "<tr></tr>" });  
            });  
            function saveOrder1() {  
            //  var data = $("#gridtbody").map(function() { return $(this).children().html(); }).get();  
                var data = $("[name='biaozhi']").map(function() { return $(this).html(); }).get();  
                $("#listhaoSortOrder").val(data.join("|"));  
            };  
        </script>  
    </body>  
    </html>

代码运行效果截图：

转载于:https://www.cnblogs.com/haha12/p/4692052.html

weixin_30646315

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery dragsort table实现拖拽排序

转自：http://haoningabc.iteye.com/blog/1593640dragsort官网地址：http://dragsort.codeplex.com/html代码如下（需引入jquery和dragsort.js）： <html> <head> <script type="tex...
复制链接

扫一扫