jquery sortable排序 - JavaScript论坛

pigzee

等　级：论坛游民
帖　子：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>