jquery ui 实现table的sortable功能以及过滤记录功能

本人在工作中曾使用js实现过用鼠标拖动表格的行实现重新排序的功能。当时写了不少的js代码。最近发现jquery ui也能实现这个功能，而且很方便，真后悔当时不知道有这么个好东东。好，现在介绍下如何使用jquery ui来实现。

 

引入的js文件

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>

 

页面元素

<div id="div_tbl" style="position:absolute;left:100px;">
<table cellspacing="1" cellpadding="0">
    <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>

 

 

具体代码

<script type="text/javascript">
$(function(){
    //屏蔽屏幕的右键功能，一般来说只要在屏幕点击鼠标右键，浏览器不会再显示菜单
    $(document).bind("contextmenu", function() { return false; })
   
    //一般来说，如果显示了输入过滤条件的文本框，只要用户点击该框以外的地方，
    //该框会消失，因此绑定了文档的鼠标点击事件
    $(document).mousedown(function(e){
        if($('#div_text'))
            $('#div_text').remove();
    });
   
    $("#char").keyup(function(){
        $("tbody>tr").hide();
        $("tbody>tr>:nth-child(1):contains('"+$(this).val()+"')").each(function(){
            $(this).parent().show();
        });
    });
  
    //根据列值实现过滤功能
    $('th').mousedown(function(e){
        //如果是点击鼠标左键或者中键，则不显示文本框
        //上文曾经定义屏蔽屏幕的右键功能$(document).bind("contextmenu"...
        //请留意，这里定义的是mousedown
        if(e.which=='1' || e.which=='2') return;
       
        //获取列标对象，以及它的相对于浏览器左边的距离
        $_th=$(this);
        var offset = $_th.offset();
        var left= offset.left;
        var top=offset.top;
        //如果对着列标点击右键时，
        //存在输入过滤条件的文件框，则把它所在的层删除
        if($('#div_text'))
            $('#div_text').remove();
        //创建输入过滤条件的文本框以及它所在的层，并把它们加到文档中
        $_div_text=$("<div id='div_text' style='position:absolute;'><input id='txt' value=''></input></div>");
        $("body").append($_div_text);
       
        //定义输入过滤条件的层的对于浏览器的实际位置
        //让这个层一定出现在用户点击的列标上方
        $_div_text
            .css({
                "top":(top-$("#div_text").height())+"px",
                "left":(left)+"px"
            });
       
        //定义过滤条件输入框的键盘输入事件
        //如果用户按了回车，就根据过滤条件来过滤表格的行
        $('#txt').keydown(function(event){
            if(event.keyCode == 13){
                //获取用户鼠标右击的列标题在tr中的index值
                var index= $_th.index();
                //先把所有相关行隐藏
                $("tbody>tr").hide();
                //找到符合用户的过滤条件td集合
                //循环这个td集合，找到它们所在的tr,让tr显示出来
                $("tbody>tr>:nth-child("+(index+1)+"):contains('"+$(this).val()+"')").each(function(){
                    $(this).parent().show();
                });
                //执行完过滤操作后，隐藏过滤条件输入框
                $(this).remove();
            }
        });
       
        //由于上文绑定了文档的mousedown事件。由于事件冒泡的作用下，
        //当用户点击了文本档后，这个事件会往上冒泡到文档处。因此无输入过滤条件了
        //所以当用户点击这个文本框后，阻止mousedown事件往上冒
        $('#txt').mousedown(function(e){e.stopPropagation();});
       
        //由于上文绑定了文档的mousedown事件。由于事件冒泡的作用下，
        //当文本框显示后（或者未等它完全显示出来），列标题的mousedowng事件
        //就冒到文档处了，文档的mousedown就把这个刚创建的文本框给干掉
        //所以当用户点击列标题后，阻止mousedown事件往上冒
        e.stopPropagation();

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

</script>