| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1896 人关注过本帖
标题:jquery sortable排序
只看楼主 加入收藏
pigzee
Rank: 2
等 级:论坛游民
帖 子:20
专家分:69
注 册:2010-3-30
结帖率:100%
收藏
已结贴  问题点数:20 回复次数:8 
jquery sortable排序
问一下,呵呵。我现在table的行可以实现拖拽排序。但是我想定义到行中的一列来排序,呵呵。只对一列拖动排序,如何实现呢?求高手!
程序代码:
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8" />  
    <title>jQuery UI Sortable - Display as grid</title>  
    <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />  
    <script type="text/javascript" src="ui/jquery-1.4.2.js"></script>  
    <script type="text/javascript" src="ui/jquery.ui.core.js"></script>  
    <script type="text/javascript" src="ui/jquery.ui.widget.js"></script>  
    <script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>  
    <script type="text/javascript" src="ui/jquery.ui.sortable.js"></script>  
    <script type="text/javascript" src="ui/jquery-ui-1.8.4.custom.js"></script> 
     <style>
         .class_1{
             border: 1px solid #FF0000;
         }
     </style>
</head>  
<body>  
<div id="div_tbl" style="position:absolute;left:100px;">
<table cellspacing="1" cellpadding="0" id="tt">
    <thead>
        <tr>
            <th>姓名</th><th>性别</th><th>学号</th>
        </tr>
    </thead>
    <tbody>
        <tr id="1">
            <td>a</td><td>男</td><td>2</td>
        </tr>
        <tr id="2">
            <td>b</td><td>男</td><td>3</td>
        </tr>
        <tr id="3">
            <td>bv</td><td>男</td><td>1</td>
        </tr>
    </tbody>
</table>
</div>

</body>   

<script type="text/javascript">
$(function(){
       
   
  
    //实现拖动行重新排序功能
    $("tbody").sortable({stop:function(event, ui){
        //stop事件是在完成重新排序后触发的事件
        //在此只简单显示被拖放行的id值
        alert(ui.item.attr("id"));
       
    }});
    //区分奇偶行背景色
    $("tbody>tr:odd").css("background","red");
    $("tbody>tr:even").css("background","green");
   
});

</script>





</html>


搜索更多相关主题的帖子: sortable jquery 
2010-10-18 10:20
gupiao175
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:40
帖 子:1787
专家分:7527
注 册:2007-6-27
收藏
得分:20 
请问楼主指的一列里的数据是数字还是文字?楼主的拖拽功能你用了几个插件啊,看了你加载了很多JQ插件,头都晕了。

Q:1428196631,百度:开发地 即可找到我,有事请留言!
2010-10-18 10:28
pigzee
Rank: 2
等 级:论坛游民
帖 子:20
专家分:69
注 册:2010-3-30
收藏
得分:0 
哈哈,只用到了sortable.js ;

sortable用到了core.js所以也引进了后者。

数字和文字都需要。谢谢!
2010-10-18 17:38
pigzee
Rank: 2
等 级:论坛游民
帖 子:20
专家分:69
注 册:2010-3-30
收藏
得分:0 
呵呵,用ul li就可以,没问题
程序代码:
//表格排序
            $(document).ready(function(){
                $("tbody #content_list").mouseover(function(){
                    $("tbody #content_list").css('cursor', 'move');
                });
               
                //实现拖动行重新排序功能
                $("tbody #content_list").sortable({
                    cursor : 'move',
                    axis : 'y',
                    tolerance : '50%',
                    start : function(event, ui){
                        var body = $("#content_list")[0] ;
                        var rows = body.rows;
                        $(rows).css('background-color','');
                        ui.item.css('background-color','#DFD');
                    },
                    stop:function(event, ui){
                       
                }});
            });


2010-10-22 17:17
liaohongchu
Rank: 1
等 级:新手上路
帖 子:133
专家分:0
注 册:2008-4-25
收藏
得分:0 
这个非常好 我总于找到了  一天了看到希望了 谢谢了。。。哈哈
2011-01-11 20:48
快速回复:jquery sortable排序
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.086660 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved